微信小程序官方组件展示之视图容器page-container源码

软件事业部

发布于 2022-08-17 09:03:19

8610

发布于 2022-08-17 09:03:19

文章被收录于专栏：软件事业部专栏

以下将展示微信小程序之视图容器page-container源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

属性说明：

属性	类型	默认值	必填	说明	最低版本
show	boolean	FALSE	否	是否显示容器组件	2.16.0
duration	number	300	否	动画时长，单位毫秒	2.16.0
z-index	number	100	否	z-index 层级	2.16.0
overlay	boolean	TRUE	否	是否显示遮罩层	2.16.0
position	string	bottom	否	弹出位置，可选值为 top bottom right center	2.16.0
round	boolean	FALSE	否	是否显示圆角	2.16.0
close-on-slideDown	boolean	FALSE	否	是否在下滑一段距离后关闭	2.16.0
overlay-style	string		否	自定义遮罩层样式	2.16.0
custom-style	string		否	自定义弹出层样式	2.16.0
bind:beforeenter	eventhandle		否	进入前触发	2.16.0
bind:enter	eventhandle		否	进入中触发	2.16.0
bind:afterenter	eventhandle		否	进入后触发	2.16.0
bind:beforeleave	eventhandle		否	离开前触发	2.16.0
bind:leave	eventhandle		否	离开中触发	2.16.0
bind:afterleave	eventhandle		否	离开后触发	2.16.0
bind:clickoverlay	eventhandle		否	点击遮罩层时触发	2.16.0

Bug & Tip：

1.tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器

2.tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面

示例代码：

WXML:

<view class="title">弹出位置</view>
<view class="box">
 <button class="btn" bindtap="popup" data-position="right">右侧弹出</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">设置{{round ? '直角' : '圆角'}}</button>
</view>
<view class="title">遮罩层</view>
<view class="box">
 <button class="btn" bindtap="changeOverlay">设置{{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;
}

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序·云开发