小程序开发 模态弹出框的控制

// 模态框控制弹出按钮
<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)
},
原文地址:https://www.cnblogs.com/dianzan/p/7636629.html