效果图
HTML
<view bindtap="clickme">点击我可以看到底部弹框的出现</view> <!--屏幕背景变暗的背景 --><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 {height: 300rpx;width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 2000;background: #fff;padding-top: 20rpx;}
JS
Page({data: {},onLoad: function (options) {},//点击我显示底部弹出框clickme: function () {this.showModal();},//显示对话框showModal: function () {// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.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 = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)}})
