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

时间:2023-03-08 20:50:39
微信小程序组件   自定义弹出框
<!-- 点击立即抢拼弹出框 -->
<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;
}