持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

page-container

背景

在日常开发中，常常需要用到整个页面的弹框，之前我都是用popup来实现的，这个的缺点就是左上角的返回是整个页面的返回，有时候不想操作了，点击返回就到上一个页面了，很不友好。而我只是想关闭这个整页的弹框，直到我发现了这个好用的组件page-container，可太开心了~~~

page-container对于我们开发整屏幕或半屏幕的弹框很有用，返回时候只会关闭弹框，而不会整个页面退出。其中返回包括了右滑手势、安卓物理返回键和调用 navigateBack 接口

它的使用也很简单，我们一起看看吧~

栗子

html代码

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

js部分

data: {
    show: false,
    duration: 300,
    position: 'right',
    round: false,
    overlay: true,
    customStyle: '',
    overlayStyle: ''
},
exit() {
    this.setData({show: false})
},

share-element

背景

共享元素，是动画的一种形式，需要结合page-container使用，在页面放置share-element组件，同时page-container中也放置对应的share-element组件。通过key来匹配，当page-container show的时候，动画的transtrom为true，当page-container隐藏的时候，动画会退出效果。

属性

属性	类型	默认值	必填	说明
key	string		是	标记
transform	boolean	false	否	是否进行动画
duration	number	300	否	动画时长，单位毫秒
easing-function	string	ease-out	否	css缓动函数

栗子

// 页面部分
<view class="screen screen1">
    <block wx:for="{{contacts}}" wx:key="id" wx:for-item="contact">
        <view class="contact" bindtap="showNext" data-idx="{{index}}">
            <share-element class="avatar" key="avatar" duration="{{duration}}" transform="{{transformIdx === index}}">
                 <image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}"></image>
            </share-element>
            <share-element duration="{{duration}}" class="name" key="name" transform="{{transformIdx === index}}">
               {{contact.name}}
            </share-element>
        </view>
    </block>
</view>

// 弹框部分
<page-container
    show="{{show}}"
    overlay="{{overlay}}"
    close-on-slide-down
>
    <view class="screen screen2">
        <view class="contact">
            <share-element class="avatar" duration="{{duration}}" key="avatar" transform>
                <image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}" />
            </share-element>
            <share-element class="name" key="name" duration="{{duration}}" transform>
                {{contact.name}}
            </share-element>
        </view>
    </view>
</page-container>