以下將展示微信小程序之視圖容器page-container源碼官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
頁面容器。
小程序如果在頁面內(nèi)進(jìn)行復(fù)雜的界面設(shè)計(jì)（如在頁面內(nèi)彈出半屏的彈窗、在頁面內(nèi)加載一個(gè)全屏的子頁面等），用戶進(jìn)行返回操作會(huì)直接離開當(dāng)前頁面，不符合用戶預(yù)期，預(yù)期應(yīng)為關(guān)閉當(dāng)前彈出的組件。為此提供“假頁”容器組件，效果類似于 popup 彈出層，頁面內(nèi)存在該容器時(shí)，當(dāng)用戶進(jìn)行返回操作，關(guān)閉該容器不關(guān)閉頁面。返回操作包括三種情形，右滑手勢(shì)、安卓物理返回鍵和調(diào)用 navigateBack 接口。
屬性說明：
Bug& Tip：
1.tip:當(dāng)前頁面最多只有 1 個(gè)容器，若已存在容器的情況下，無法增加新的容器
2.tip:wx.navigateBack 無法在頁面棧頂調(diào)用，此時(shí)沒有上一級(jí)頁面
示例代碼：
WXML:
<view class="title">彈出位置</view>
<view class="box">
? <button class="btn" bindtap="popup" data-position="right">右側(cè)彈出</button>
? <button class="btn" bindtap="popup" data-position="top">頂部彈出</button>
? <button class="btn" bindtap="popup" data-position="bottom">底部彈出</button>
? <button class="btn" bindtap="popup" data-position="center">中央彈出</button>
</view>
<view class="title">彈窗圓角</view>
<view class="box">
? <button class="btn" bindtap="changeRound">設(shè)置{{round ? '直角' : '圓角'}}</button>
</view>
<view class="title">遮罩層</view>
<view class="box">
? <button class="btn" bindtap="changeOverlay">設(shè)置{{overlay ? '無' : '有'}}遮罩</button>
? <button class="btn" bindtap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
? <button class="btn" bindtap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
? <button class="btn" bindtap="changeOverlayStyle" data-type="blur">模糊遮罩</button>
</view>
<page-container
? show="{{show}}"
? round="{{round}}"
? overlay="{{overlay}}"
? duration="{{duration}}"
? position="{{position}}"
? close-on-slide-down="{{false}}"
? bindbeforeenter="onBeforeEnter"
? bindenter="onEnter"
? bindafterenter="onAfterEnter"
? bindbeforeleave="onBeforeLeave"
? bindleave="onLeave"
? bindafterleave="onAfterLeave"
? bindclickoverlay="onClickOverlay"
? custom-style="{{customStyle}}"
? overlay-style="{{overlayStyle}}"
>
? <view class="detail-page">
? ? <button type="primary" bindtap="exit">推出</button>
? </view>
</page-container>
WXSS:
page {
? background-color: #f7f8fa;
? color: #323232;
? width: 100%;
? height: 100%;
}
.box {
? margin: 0 12px;
}
.title {
? margin: 0;
? padding: 32px 16px 16px;
? color: rgba(69, 90, 100, 0.6);
? font-weight: normal;
? font-size: 18px;
? line-height: 20px;
? text-align: center;
}
.btn {
? display: block;
? width: 100%;
? margin: 10px 0;
? background-color: #fff;
}
.detail-page {
? width: 100%;
? height: 100%;
? min-height: 300px;
? display: flex;
? align-items: center;
? justify-content: center;
}
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權(quán)問題，請(qǐng)聯(lián)系我們第一時(shí)間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
