- 弹出层wxml页面结构
<view class='couponLayerBox' animation="{{animMaskData}}" style='height:{{LayerBoxHeight}};'></view>
<view class='couponLayer' animation="{{animContentData}}">
<view class='title'>
<image class='couponIcon' src='https://wximg.youtasc.com/icon_coupon.png'></image>
<text>领取优惠券</text>
<view class='close' bindtap='takeCouponClose'> <image src='https://wximg.youtasc.com/close.png'></image></view>
</view>
<template is="coupon" data="{{coupons:orderData.coupons}}"></template>
</view>
</view>
- 弹出层wxss样式
.couponLayerBox{
width: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
top:0rpx;
left: 0rpx;
opacity: 0;
}
.couponLayer{
width: 100%;
background-color: #fff;
position: fixed;
left: 0rpx;
bottom: 0rpx;
height: 887rpx;
z-index: 11;
transform:translateY(100%);
}
.couponLayer .title{
height: 87rpx;
line-height: 87rpx;
padding:0 25rpx;
border-bottom: 1rpx solid #e6e6e6;
margin-bottom: 50rpx;
}
.couponLayer .title .couponIcon{
width: 44rpx;
height: 33rpx;
margin-right: 18rpx;
}
.couponLayer .title text{
font-size: 28rpx;
color: #363636;
}
.couponLayer .title .close{
padding:20rpx;
width: 22rpx;
height: 22rpx;
float: right;
margin-top: 10rpx;
}
.couponLayer .title .close image{
margin-bottom: 30rpx;
}
- 弹出层js
在js文件中引入封装好动画的模块,通过this.*使用其中的方法。
引入方法见:https://blog.csdn.net/weixin_41257563/article/details/82792194
takeCoupon:function(e){
this.setData({
LayerBoxHeight:'100%'
})
this.createMaskShowAnim();
this.createContentShowAnim();
},
takeCouponClose:function(){
this.setData({
'LayerBoxHeight':'0'
})
this.createMaskHideAnim();
this.createContentHideAnim();
},
- 弹出层封装共用动画方法页面
在utils文件中新建一个文件用来封装动画方法。
封装方法见:https://blog.csdn.net/weixin_41257563/article/details/82792194
export default {
data: {
animMaskData: [],
animContentData: [],
},
animOp: {
createMaskShowAnim() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'cubic-bezier(.55, 0, .55, .2)',
});
this.maskAnim = animation;
animation.opacity(1).step();
this.setData({
animMaskData: animation.export(),
});
},
createMaskHideAnim() {
this.maskAnim.opacity(0).step();
this.setData({
animMaskData: this.maskAnim.export(),
});
},
createContentShowAnim() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'cubic-bezier(.55, 0, .55, .2)',
});
this.contentAnim = animation;
animation.translateY(0).step();
this.setData({
animContentData: animation.export(),
});
},
createContentHideAnim() {
this.contentAnim.translateY('100%').step();
this.setData({
animContentData: this.contentAnim.export(),
});
},
},
};