好资源导航 » 文章资讯 » 微信小程序商品详情页的底部弹出框效果

微信小程序商品详情页的底部弹出框效果

2023-09-13 17:43:04 46

电商项目中商品详情页，加入购物车或者下单时可以选择商品属性的弹出框，通过设置view的平移动画，达到从底部弹出的样式

1.js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)

//显示对话框
showModal:function(){
//显示遮罩层
varanimation=wx.createAnimation({
duration:200,
timingFunction:"linear",
delay:0
})
this.animation=animation
animation.translateY(300).step()
this.setData({
animationData:animation.export(),
showModalStatus:true
})
setTimeout(function(){
animation.translateY(0).step()
this.setData({
animationData:animation.export()
})
}.bind(this),200)
},
//隐藏对话框
hideModal:function(){
//隐藏遮罩层
varanimation=wx.createAnimation({
duration:200,
timingFunction:"linear",
delay:0
})
this.animation=animation
animation.translateY(300).step()
this.setData({
animationData:animation.export(),
})
setTimeout(function(){
animation.translateY(0).step()
this.setData({
animationData:animation.export(),
showModalStatus:false
})
}.bind(this),200)
}

2.wxss代码

/*使屏幕变暗*/
.commodity_screen{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
opacity:0.2;
overflow:hidden;
z-index:1000;
color:#fff;
}
/*对话框*/
.commodity_attr_box{
height:300rpx;
width:100%;
overflow:hidden;
position:fixed;
bottom:0;
left:0;
z-index:2000;
background:#fff;
padding-top:20rpx;
}

3.wxml代码(其中的showModalStatus变量要现在js代码中的data对象中初始化，初始化为false，因为最初的时候对话框并没有显示)




在这里写弹出框里面的布局

4.设置点击事件，给目标view设置点击函数showModal()或者hideModal()

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

微信小程序商品详情页的底部弹出框效果

热门推荐

随机推荐