原生小程序开发组件｜视图容器组件汇总（四）

page-container

页面容器。用于实现类似 popup 弹出层的效果，可以通过控制 show 属性来实现显示/隐藏。

功能描述

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层。

页面内存 page-container 时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

容器版本 2.3.0+ 以上支持

注意：当页面状态触发 page-container 显示隐藏时，开发者需在 page-container 离开视图的相关事件中，将控制 page-container 的状态设置为 false，否则可能会影响再次打开 page-container。

属性说明

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

示例代码

TYML

<view class="title">弹出位置</view>
<view class="box">
  <button class="btn" bind:tap="popup" data-position="right">右侧弹出</button>
  <button class="btn" bind:tap="popup" data-position="top">顶部弹出</button>
  <button class="btn" bind:tap="popup" data-position="bottom">底部弹出</button>
  <button class="btn" bind:tap="popup" data-position="center">中央弹出</button>
</view>
 
<view class="title">弹窗圆角</view>
<view class="box">
  <button class="btn" bind:tap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
</view>
 
<view class="title">遮罩层</view>
<view class="box">
  <button class="btn" bind:tap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
  <button class="btn" bind:tap="changeOverlayStyle" data-type="blur">模糊遮罩</button>
</view>
 
<page-container
  style="height: 500px"
  show="{{show}}"
  round="{{round}}"
  overlay="{{overlay}}"
  duration="{{duration}}"
  position="{{position}}"
  close-on-slide-down="{{false}}"
  bind:beforeenter="onBeforeEnter"
  bind:enter="onEnter"
  bind:afterenter="onAfterEnter"
  bind:beforeleave="onBeforeLeave"
  bind:leave="onLeave"
  bind:afterleave="onAfterLeave"
  bind:clickoverlay="onClickOverlay"
  custom-style="{{customStyle}}"
  overlay-style="{{overlayStyle}}"
>
  <view class="detail-page">
    <button type="primary" bind:tap="exit">推出</button>
  </view>
</page-container>

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。    

JS

Page({
  data: {
    show: false,
    duration: 300,
    position: 'right',
    round: false,
    overlay: true,
    customStyle: '',
    overlayStyle: '',
  },
  onLoad: function () {},
  onShow() {},
 
  popup(e) {
    const position = e.currentTarget.dataset.position;
    let customStyle = '';
    let duration = this.data.duration;
    switch (position) {
      case 'top':
      case 'bottom':
        customStyle = '';
        break;
      case 'right':
        break;
    }
    this.setData({
      position,
      show: true,
      customStyle,
      duration,
    });
  },
 
  changeRound() {
    this.setData({ round: !this.data.round });
  },
 
  changeOverlay() {
    this.setData({ overlay: !this.data.overlay, show: true });
  },
 
  changeOverlayStyle(e) {
    let overlayStyle = '';
    const type = e.currentTarget.dataset.type;
    switch (type) {
      case 'black':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)';
        break;
      case 'white':
        overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)';
        break;
      case 'blur':
        overlayStyle =
          'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);';
    }
    this.setData({ overlayStyle, show: true });
  },
 
  exit() {
    this.setData({ show: false });
  },
 
  onBeforeEnter(res) {
    console.log(res);
  },
  onEnter(res) {
    console.log(res);
  },
  onAfterEnter(res) {
    console.log(res);
  },
  onBeforeLeave(res) {
    console.log(res);
  },
  onLeave(res) {
    console.log(res);
    this.setData({ show: false });
  },
  onAfterLeave(res) {
    console.log(res);
  },
 
  onClickOverlay(res) {
    this.setData({
      show: false,
    });
  },
});

TYSS

.box {
  margin: 0 20px;
}
 
.title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: normal;
  font-size: 14px;
  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;
}

cover-view

基础库 2.7.0 开始支持, 低版本需做兼容处理。

功能描述

覆盖在原生组件之上的文本视图。

Bug & Tip

1. tip: 需在原生组件上覆盖其它组件, 且该组件不作为原生组件子节点时, 必须在最外层使用 cover-view 包裹住, 其它场景不建议使用cover-view
2. tip: 不要嵌套使用 cover-view , cover-view 只作为覆盖在原生组件之上的包裹标签使用
3. tip: 不要作为原生组件子节点使用
4. tip: 建议cover-view 子节点不要溢出父节点

示例代码

TYML

<view class="container">
  <map style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}"></map>
  <cover-view class="cover-view">
    <view class="flex-wrp" style="flex-direction:row;" bindtap="coverTap">
      <view class="flex-item demo-text-1"></view>
      <view class="flex-item demo-text-2"></view>
      <view class="flex-item demo-text-3"></view>
    </view>
  </cover-view>
</view>

JS

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.32452,
  },
  coverTap(e) {
    console.log(e);
  },
});

CSS

.container {
  position: relative;
}
 
.cover-view {
  position: absolute;
  top: calc(50% - 150rpx);
  left: calc(50% - 300rpx);
}
 
.flex-wrp {
  display: flex;
}
 
.flex-item {
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}
 
.demo-text-1 {
  background: rgba(26, 173, 25, 0.7);
}
 
.demo-text-2 {
  background: rgba(39, 130, 215, 0.7);
}
 
.demo-text-3 {
  background: rgba(255, 255, 255, 0.7);
}

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。