实现微信小程序底部弹出框效果，代码分为html，css和js两部分，具体代码详情大家参考下本文。
html
|
<view class="commodity_screen"bindtap="hideModal"wx:if="{{showModalStatus}}"></view> <view animation="{{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) } |