小程序开发 模态弹出框的控制
Posted ThisCall
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序开发 模态弹出框的控制相关的知识，希望对你有一定的参考价值。
// 模态框控制弹出按钮
<view class=‘btn-right-btn flexca‘ bindtap="setModalStatus" data-status="1">立即抢拼</view>
//模态弹出框外包裹
<view class=‘add-rob‘ bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">
JS函数
//-----------------------------------------
// 弹窗
setModalStatus: function (e) {
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step();
this.setData({
animationData: animation.export()
})
if (e.currentTarget.dataset.status == 1) {
this.setData(
{
showModalStatus: true
}
);
}
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation
})
if (e.currentTarget.dataset.status == 0) {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200)
},
以上是关于小程序开发 模态弹出框的控制的主要内容，如果未能解决你的问题，请参考以下文章