原生小程序底部弹出层动画过渡
标签：lse 内容 api ati add port translate pac padding
1.wxml
<view class="my-dialog" >
<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;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.my-dialog .my-container {
position: fixed;
width: 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 , 页面执行动画
});
},
原生小程序底部弹出层动画过渡
标签：lse 内容 api ati add port translate pac padding
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/weixin/16006.html
- 上一篇：Django 小程序技术打造微信小程序助手 ??
- 下一篇：微信小程序列表时间戳转换
