小程序開發 模態彈出框的控制
阿新 • • 發佈：2017-10-08
mat show -s dal class anim s函數 模態 target
// 模態框控制彈出按鈕
<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) },
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) },
小程序開發 模態彈出框的控制