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

// 模态框控制弹出按钮

<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