1.wxml
<view class="my-dialog" catchtouchmove="true">//catchtouchmove阻止冒泡，防止遮罩层底部滑动
<view class="my-mask" bindtap="confirmDialog" hidden="{{!showDialog}}" ></view>
<view class="my-container" animation="{{animatheightadd}}"></view>
</view>
2.wxss
.my-dialog {
opacity: 1;
}
.my-dialog .my-mask {
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.my-dialog .my-container {
position: fixed;
90%;
padding: 30rpx 5%;
bottom: 0;
left: 0;
background:#fff;
overflow: hidden;
z-index: 5000;
}
3.js
data:{
animatheightadd:{},
showDialog:false
}
onReady: function () {
//定义动画
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//先隐藏内容
this.animation.translateY(331).step()
this.setData({
animatheightadd: this.animation.export()
})
},
refuse：function(){
//显示底部弹出层
this.animation.translateY(0).step()
this.setData({
animatheightadd:this.animation.export()
})
this.setData({
showDialog: true
})
}
confirmDialog: function (e) {
//隐藏底部
this.setData({
showDialog: false
})
this.animation.translateY(331).step()
this.setData({
animatheightadd:this.animation.export() //导出动画api , 页面执行动画
});
},