How to add a pop-up box to the product details page of WeChat Mini Program

This time I will bring you a WeChat mini programHow to add a pop-up box to the product details page of the WeChat mini program. What are the precautions for adding a pop-up box to the product details page of the WeChat mini program? The following are This is a practical case, let’s take a look at it.

In the Product details page of the e-commerce project, you can select the pop-up box of product attributes when adding to the shopping cart or placing an order. By setting the panning animation of the view, you can achieve the pop-up style from the bottom

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)
 }

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;
}

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

 <!--屏幕背景变暗的背景 -->
 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <!--弹出框 -->
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>

4. Set the click event to the target View setting click function showModal() or hideModal()

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

Recommended reading:

Analysis of chain call usage in JS design pattern

Add background mock to vue-cli project Detailed explanation of interface steps

The above is the detailed content of How to add a pop-up box to the product details page of WeChat Mini Program. For more information, please follow other related articles on the PHP Chinese website!