Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-05-15 14:06:26
Original
3878 people have browsed it

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)
 }
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 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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template