How to create pop-up box function in WeChat applet-JS Tutorial-php.cn

How to create pop-up box function in WeChat applet

php中世界最好的语言

Release： 2018-06-06 10:18:40

Original

3353 people have browsed it

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

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)

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

Copy after login

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!