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

1. 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)
  },

2. 布局

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

3. 样式

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