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中微信小程序自定义底部弹出框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!