微信小程序实现底部弹窗_javascript技巧_

点击我可以看到底部弹框的出现   

/*使屏幕变暗  */ .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: 50%;   width: 100%;   overflow: hidden;   position: fixed;   bottom: 0;   left: 0;   z-index: 2000;   background: #fff;   padding-top: 20rpx; }

//点击我显示底部弹出框   clickme: function () {     this.showModal();   },     //显示对话框   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)   },