微信小程序自定义底部弹出框

2020-03-21 16:14:49

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了微信小程序底部弹出框展示的具体代码，供大家参考，具体内容如下

效果图：

微信小程序,底部,弹出框

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 () {  // 显示遮罩层  var animation = 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 () {  // 隐藏遮罩层  var animation = 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) }

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

上一篇：微信小程序实现红包雨功能

下一篇：微信小程序实现手指触摸画板