Comment ajouter une boîte contextuelle à la page de détails du produit du mini programme WeChat

Cette fois, je vais vous montrer comment ajouter une boîte contextuelle dans la page Détails du produit du programme WeChat Mini. Quelles sont les Précautions pour ajouter une boîte contextuelle dans. la page de détails du produit du programme WeChat Mini, comme suit. C'est un cas pratique, jetons-y un coup d'œil.

Dans la page détails du produit du projet e-commerce, vous pouvez sélectionner la boîte contextuelle des attributs du produit lors de l'ajout au panier ou de la passation d'une commande en réglant le panoramique. animation de la vue, le style de pop-up du bas est obtenu

Code 1.js (généralement, seule la fonction qui affiche la boîte de dialogue est appelée. 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 de données dans le code js, et 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 et définissez la fonction de clic showModal() ou hideModal() pour la vue cible

Je crois 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 chinois de PHP !

Lecture recommandée :

Analyse de l'utilisation des appels en chaîne dans le modèle de conception JS

Ajouter une maquette d'arrière-plan au projet vue-cli Explication détaillée des étapes de l'interface

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!