How to realize the pop-up box at the bottom of the product details page of the WeChat applet-JS Tutorial-php.cn

This time I will show you how to implement the pop-up box at the bottom of the WeChat Mini Program product details pageProduct details, and what are theprecautionsto implement the pop-up box at the bottom of the WeChat Mini Program product details page, as follows This is a practical case, let’s take a look at it.

1.js code (usually only the function that displays the dialog box is called. When clicking outside the dialog box, the dialog box can disappear)

//显示对话框 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) }

Copy after login

2.wxss code

/*使屏幕变暗 */ .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; }

Copy after login

3.wxml code (the showModalStatus variable must be initialized in the data object in the js code, initialized to false, because the dialog box was not displayed initially)

   在这里写弹出框里面的布局

Copy after login

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!