项目实现效果如图
项目效果实现思路：
wxml页面设计好底部栏《加入购物车，立即购买》绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果
项目实现代码
1、wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中初始化，初始化为false，因为最初的时候对话框并没有显示)
//点击下面这句话出现底部弹框<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>
1、wxss代码 (实现背景暗化效果和弹出层效果)
.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;}
3、js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)
//点击我显示底部弹出框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)}
