How to create pop-up box function in WeChat applet

This time I will show you how to create a pop-up box function in a WeChat applet. What are the precautions for how to create a pop-up box function in a WeChat applet? The following is a practical case, let’s take a look.

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, the pop-up style from the bottom can be achieved

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 was 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 and set the 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:

How does ajax dynamically add the tr and td of the table

How to carousel images in the WeChat applet Set to adaptive height

The above is the detailed content of How to create pop-up box function in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!