page-container

页面容器。

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

share-element

共享元素。 共享元素是一种动画形式，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。 使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。

示例代码：

<!--pages/component/pages/page-container/page-container.mcml-->
<view class="container">
  <view class="statement">页面容器。</view>
  <view style="display:flex; flex-direction:column;">
    <share-element style="display:block;" key="showButton" transform="{{shareTransform}}" duration="{{shareDuration}}" easing-function="{{shareEasingFunction}}">
      <button bindtap="setShow" >显示容器组件 : {{show}}</button>
    </share-element>
    <button bindtap="setDuration">动画时长 : {{duration}}ms</button>
    <button bindtap="setOverlay">显示遮罩层 : {{overlay}}</button>
    <button bindtap="setPosition" >弹出位置 : {{position}}</button>
    <button bindtap="setRound" >显示圆角 : {{round}}</button>
    <button bindtap="setCloseOnSlideDown" >下滑是否关闭 : {{closeOnSlideDown}}</button>
  </view>

  <view class="statement">共享元素。</view>
  <view style="display:flex; flex-direction:column;">
    <button bindtap="setShareTransform">是否使用动画 : {{shareTransform}}</button>
    <button bindtap="setShareDuration">动画时长 : {{shareDuration}}ms</button>
    <button bindtap="setShareEasingFunction" >弹出位置 : {{shareEasingFunction}}</button>
  </view>

  <view class="cssname">bindbeforeenter: 进入前触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindbeforeenter}}</text>
  <view class="cssname">bindenter: 进入中触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindenter}}</text>
  <view class="cssname">bindafterenter: 进入后触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindafterenter}}</text>
  <view class="cssname">bindbeforeleave: 离开前触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindbeforeleave}}</text>
  <view class="cssname">bindleave: 离开中触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindleave}}</text>
  <view class="cssname">bindafterleave: 离开后触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindafterleave}}</text>
  <view class="cssname">bindclickoverlay: 点击遮罩层触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindclickoverlay}}</text>
</view>

<page-container 
  show="{{show}}"
  duration="{{duration}}"
  overlay="{{overlay}}"
  position="{{position}}"
  round="{{round}}"
  z-index="99999"
  close-on-slideDown="{{closeOnSlideDown}}"
  custom-style="background-color:#191919;color:#fff;"
  overlay-style="background-color:rgba(0,0,0, 0.4)"

  bind:beforeenter="bindbeforeenter"
  bind:enter="bindenter"
  bind:afterenter="bindafterenter"
  bind:beforeleave="bindbeforeleave"
  bind:leave="bindleave"
  bind:afterleave="bindafterleave"
  bind:clickoverlay="bindclickoverlay"

  >
  <share-element key="showButton"  transform="{{shareTransform}}" duration="{{shareDuration}}" easing-function="{{shareEasingFunction}}">
    <view bindtap="setShow" >显示容器组件 : {{show}}</view>
  </share-element>
  <view class="paragraph">
    应用如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。
    <button bindtap="navigateBack" >关闭</button>
  </view>
</page-container>

// pages/component/pages/page-container/page-container.js
Page({
  data: {
    show: false,
    duration: 300,
    overlay: true,
    position: 'bottom',
    round: false,
    closeOnSlideDown: false,
    shareTransform: false,
    shareDuration: 300,
    shareEasingFunction: 'ease-out'
  },
  setShow: function(){
    this.setData({
      show: !this.data.show
    })
  },
  setDuration: function(){
    var m = 10, n = 2000;
    var duration = Math.floor(Math.random() * (m - n + 1)) + n
    this.setData({
      duration: duration
    })
  },
  setOverlay: function(){
    this.setData({
      overlay: !this.data.overlay
    })
  },
  setPosition: function(){
    var positions = ['top', 'bottom', 'right', 'left', 'center'];
    var index = positions.indexOf(this.data.position);
    var position = 'bottom'
    if(index >= 0){
      index += 1;
      if(index >= positions.length){
        index = 0;
      }
      position = positions[index];
    }
    this.setData({
      position: position
    })
  },
  setRound: function(){
    this.setData({
      round: !this.data.round
    })
  },
  setCloseOnSlideDown: function(){
    this.setData({
      closeOnSlideDown: !this.data.closeOnSlideDown
    })
  },
  setShareTransform: function(){
    this.setData({
      shareTransform: !this.data.shareTransform
    })
  },
  setShareDuration: function(){
    var m = 10, n = 2000;
    var duration = Math.floor(Math.random() * (m - n + 1)) + n
    this.setData({
      shareDuration: duration
    })
  },
  setShareEasingFunction: function(){
    var shareEasingFunctions = ['linear', 'ease-in', 'ease-out', 'ease-in-out'];
    var index = shareEasingFunctions.indexOf(this.data.shareEasingFunction);
    var shareEasingFunction = 'ease-out'
    if(index >= 0){
      index += 1;
      if(index >= shareEasingFunctions.length){
        index = 0;
      }
      shareEasingFunction = shareEasingFunctions[index];
    }
    this.setData({
      shareEasingFunction: shareEasingFunction
    })
  },
  navigateBack: function() {
    mc.navigateBack({
      delta: 2
    })
  },
  bindbeforeenter: function(e){
    this.setData({
      bindbeforeenter: JSON.stringify(e, null, 2)
    })
  },
  bindenter: function(e){
    this.setData({
      bindenter: JSON.stringify(e, null, 2)
    })
  },
  bindafterenter: function(e){
    this.setData({
      bindafterenter: JSON.stringify(e, null, 2)
    })
    this.setData({
      show: true
    })
  },
  bindbeforeleave: function(e){
    this.setData({
      bindbeforeleave: JSON.stringify(e, null, 2)
    })
  },
  bindleave: function(e){
    this.setData({
      bindleave: JSON.stringify(e, null, 2)
    })
  },
  bindafterleave: function(e){
    this.setData({
      bindafterleave: JSON.stringify(e, null, 2)
    })
    this.setData({
      show: false
    })
  },
  bindclickoverlay: function(e){
    this.setData({
      bindclickoverlay: JSON.stringify(e, null, 2)
    })
  }
})

/* pages/component/pages/page-container/page-container.mcss */
.paragraph {
  padding: 10rpx;
  box-sizing: border-box;
}

.enter.paragraph {
  transform: none;
}

button{
  width: 100%;
  font-size: 16px;
}