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

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

功能描述：

页面容器。

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

属性说明：

Bug& Tip：

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

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

示例代码：

WXML:

弹出位置

  右侧弹出

  顶部弹出

  底部弹出

  中央弹出

弹窗圆角

  设置{{round ? '直角' : '圆角'}}

遮罩层

  设置{{overlay ? '无' : '有'}}遮罩

  黑色半透明遮罩

  白色半透明遮罩

  模糊遮罩

  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}}"

>

 

    推出

 

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