實現微信小程序底部彈出框效果，代碼分為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 () {  // 顯示遮罩層  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) }

以上所述是小編給大家介紹的JS中微信小程序自定義底部彈出框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！