微信小程序组件 自定义弹出框

<!-- 点击立即抢拼弹出框 -->

<view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}"></view>

<view class='rob-box' wx:if="{{showModalStatus}}">

<view class='rob-top'>

</view>

<!-- 底部按钮 -->

<view class='rob-bottom flex'>

</view>

</view>

 

 

//------------------------------------------------------------------------------------------------------

 

// 弹窗

setModalStatus: function (e) {

var that = this;

// console.log(e.currentTarget.dataset.all);

// var parrv = this.data.parrv;

//数据初始化分界-------------------------

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step();

this.setData({

animationData: animation.export(),

vidchange: false

})

if (e.currentTarget.dataset.status == 1) {

that.setData(

{

showModalStatus: true,

vidchange: true

}

);

}

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation

})

if (e.currentTarget.dataset.status == 0) {

this.setData(

{

showModalStatus: false

}

);

}

}.bind(this), 200)

},

 

 

//------------------------------------------------------------------------------------------------------

/* 点击立即抢拼弹出框 */

.add-rob{

position: fixed;

left: 0;

bottom: 0;

width: 100%;

height: 100%;

">rgba(0,0,0,0.5);

overflow: hidden;

z-index: 60;

}

.rob-box{

width: 100%;

min-height: 200rpx;

">rgba(247,247,247,0.8);

position: fixed;

left: 0;

bottom: 0;

overflow: hidden;

z-index: 80;

}

/* .merch-stepper{

display: flex;

} */

.merch-stepper-symbol{

width: 75rpx;

height: 48rpx;

">white;

border-radius: 8rpx;

}

.merch-stepper .nownum{

width: 50rpx;

text-align: center;

margin: 0 20rpx;

}

/* 底部按钮 */

.rob-bottom{

width: 100%;

height: 100rpx;

">#f7f7f7;

padding: 15rpx 24rpx;

position: absolute;

left: 0;

bottom: 0;

box-sizing: border-box;

}

转载于:https://www.cnblogs.com/dianzan/p/7921041.html