Comment créer une fonction de boîte contextuelle dans l'applet WeChat

Cette fois, je vais vous montrer comment créer une fonction de boîte pop-up dans une applet WeChat. Quelles sont les précautions à prendre pour créer une fonction de boîte pop-up dans une applet WeChat. Voici un cas pratique, prenons-le. un regard.

Dans la page de détails du produit du projet de commerce électronique, vous pouvez sélectionner la boîte contextuelle des attributs du produit lors de l'ajout au panier ou du passage d'une commande en définissant l'animation panoramique de la vue. le style pop-up à partir du bas peut être obtenu

1. code js (appelle généralement uniquement la fonction qui affiche la boîte de dialogue. Lorsque vous cliquez en dehors de la boîte de dialogue, la boîte de dialogue peut disparaître)

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

Code 2.wxss

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

Code 3 .wxml (la variable showModalStatus doit être initialisée dans l'objet data dans le code js, initialisée à false, car la boîte de dialogue ne s'affiche pas initialement)

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

4. Définissez l'événement de clic sur la fonction de clic du paramètre d'affichage cible showModal() ou hideModal()

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment ajouter dynamiquement tr et td d'une table avec ajax

Comment carrousel d'images dans l'applet WeChat réglée sur une hauteur adaptative

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!