• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<!-- 点击立即抢拼弹出框 -->
<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;
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
(转)微信小程序开发—弹出框发布时间:2022-07-18
下一篇:
微信小程序弹框组件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap