原生微信小程序 share-element page-container 组件的使用

先上效果：

上代码！

1.布局

<template>
<view>
 <view wx:for="{{list}}" wx:key="*this">
  <view class="item" bindtap="showNext" data-index='{{index}}'>
    <share-element duration='300' transform='{{true}}'>
      <view>{{item.id}}</view>
      <view> {{item.info}}</view>
    </share-element>
  </view>
 </view>

<page-container
	show="{{show}}"
	overlay="{{overlay}}"
	close-on-slide-down
  duration="{{duration}}"
  position="{{position}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
  custom-style='background-color:#f1f1f1;'
>
	<view class="screen screen2">
		<view class="contact">
			<view class="paragraph {{show ? 'enter' : ''}}">
      	{{contact.id}}
        {{contact.info}}
			</view>
			<button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button>
		</view>
	</view>
</page-container>
</view>
 </template>

 

2.js 逻辑层处理

 data: {
    list: [{
        id: 20,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      },
      {
        id: 21,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      },
      {
        id: 22,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      },
      {
        id: 23,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      },
      {
        id: 24,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      },
      {
        id: 25,
        info: '你稍等会覅四idfh斯蒂芬和i速发货i收到回复i收到回复isdfhi是否hi收到发hi收到覅但是'
      }
    ],
    position: 'center',
    duration: 300,
    show: false,
    overlay: false,
    contact:{},
  },
  showNext(e) {
    const index = e.currentTarget.dataset.index
    this.setData({
      show: true,
      contact: this.data.list[index]
    })
  },

  showPrev() {
    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)
  },
  onAfterLeave(res) {
    console.log(res)
  },

 3.Css

page{
  color: #333333;
  background-color: #ddd;
}
.item{
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .2);
}
button {
  border: 0 solid #0010ae;
  background-color: #1f2afe;
  color: #fff;
  font-size: 120%;
  padding: 8px 16px;
  outline-width: 0;
  -webkit-appearance: none;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}
.paragraph{
  padding: 20rpx;
}
.paragraph {
  -webkit-transition: transform ease-in-out 300ms;
  transition: transform ease-in-out 300ms;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.enter.paragraph {
  transform: none;
}
 

tips:

page-container页面容器，可以在当前页面中弹出一个半屏的弹窗、或者在页面内加载一个全屏的子页面。

当page-container组件显示时，用户进行返回操作时会关闭page-container容器，而不会关闭当前页面。

每个页面最多只能显示一个page-container，如果在一个页面代码中定义了多个page-container，只有文档流中的第一个page-container能正常显示。

属性
show：是否显示page-container组件

duration：动画时长

z-index：默认100，显示在其他元素的上层

overlay：是否显示遮罩层

position：page-container弹出的位置，top、bottom、right、center，从底部或者顶部弹出时，page-container的形态是一个半屏弹窗，从右侧或者中间显示时，page-container的形态是一个全屏的子页面

round：是否显示圆角

close-on-slideDown：是否在下滑一段距离后关闭

overlay-style：自定义遮罩层的样式

custom-style：自定义弹出的page-container的样式

事件处理函数
在page-container触发、收回的这个过程中，会触发以下几个函数：
bind:beforeenter：弹出前触发
bind:enter：弹出中触发
bind:afterenter：完成弹出后触发
bind:beforeleave：收回前触发
bind:leave：收回中触发
bind:afterleave：完成收回后触发
bind:clickoverlay：点击遮罩层时触发