JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果，代码分为html，css和js两部分，具体代码详情大家参考下本文。
html
<viewclass="commodity_screen"bindtap="hideModal"wx:if="{{showModalStatus}}"></view>
<viewanimation="{{animationData}}"class="commodity_attr_box"wx:if="{{showModalStatus}}"></view>
CSS
.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{
width:100%;
overflow:hidden;
position:fixed;
bottom:0;
left:0;
z-index:2000;
background:#fff;
padding-top:20rpx;
}
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)
}
以上所述是小编给大家介绍的JS中微信小程序自定义底部弹出框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！