Explication détaillée d'exemples de boîtes de dialogue modales personnalisées dans les mini-programmes WeChat

Cet article présente principalement en détail les informations pertinentes sur les instances de dialogue modal personnalisé de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Grâce à l'API officielle, la fenêtre contextuelle modale d'affichage fournie. La fenêtre ne peut qu'afficher simplement le contenu du texte et ne peut pas personnaliser le contenu de la boîte de dialogue. Elle manque de flexibilité, j'ai donc implémenté une boîte de dialogue modale personnalisée basée sur le principe des fenêtres contextuelles modales.

wx.showModal(OBJECT)
Personnalisé
boîte de dialogue modale

Fichiers impliqués

Interfacewxml
Stylewxcss
Événements et méthodes js

Rendu

Code d'interface.wxml

<button class="show-btn" bindtap="showDialogBtn">弹窗</button>

<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
 <view class="modal-title">添加数量</view>
 <view class="modal-content">
 <view class="modal-input">
  <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input>
 </view>
 </view>
 <view class="modal-footer">
 <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
 <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
 </view>
</view>

Style.wxss

.show-btn {
 margin-top: 100rpx;
 color: #22cc22;
}

.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
 color: #fff;
}

.modal-dialog {
 width: 540rpx;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 background: #f9f9f9;
 margin: -180rpx 105rpx;
 border-radius: 36rpx;
}

.modal-title {
 padding-top: 50rpx;
 font-size: 36rpx;
 color: #030303;
 text-align: center;
}

.modal-content {
 padding: 50rpx 32rpx;
}

.modal-input {
 display: flex;
 background: #fff;
 border: 2rpx solid #ddd;
 border-radius: 4rpx;
 font-size: 28rpx;
}


.input {
 width: 100%;
 height: 82rpx;
 font-size: 28rpx;
 line-height: 28rpx;
 padding: 0 20rpx;
 box-sizing: border-box;
 color: #333;
}

input-holder {
 color: #666;
 font-size: 28rpx;
}

.modal-footer {
 display: flex;
 flex-direction: row;
 height: 86rpx;
 border-top: 1px solid #dedede;
 font-size: 34rpx;
 line-height: 86rpx;
}

.btn-cancel {
 width: 50%;
 color: #666;
 text-align: center;
 border-right: 1px solid #dedede;
}

.btn-confirm {
 width: 50%;
 color: #ec5300;
 text-align: center;
}

Événements et méthodes.js

Page({
 data: {
  showModal: false,
 },
 onLoad: function () {
 },
 /**
  * 弹窗
  */
 showDialogBtn: function() {
  this.setData({
  showModal: true
  })
 },
 /**
  * 弹出框蒙层截断touchmove事件
  */
 preventTouchMove: function () {
 },
 /**
  * 隐藏模态对话框
  */
 hideModal: function () {
  this.setData({
  showModal: false
  });
 },
 /**
  * 对话框取消按钮点击事件
  */
 onCancel: function () {
  this.hideModal();
 },
 /**
  * 对话框确认按钮点击事件
  */
 onConfirm: function () {
  this.hideModal();
 }
})

Interprétation et principes des idées de mise en œuvre

Interprétation de l'interface :

est composé d'un calque de masque + d'une fenêtre contextuelle, et les données liées {{showModal}} sont utilisées pour contrôler l'affichage et le masquage de la fenêtre contextuelle

évènement et interprétation de la méthode :
Comment faire afficher la fenêtre pop-up :

showDialogBtn: function() {
  this.setData({
  showModal: true
  })
 }

Comment faire disparaître la fenêtre pop-up :

hideModal: function () {
  this.setData({
  showModal: false
  });
 }

Il y a quelque chose auquel il faut prêter une attention particulière ici, qui est la méthode suivante :

preventTouchMove: function () {
 }

Pourquoi est-ce une méthode vide ? Comme il doit être visualisé en conjonction avec l'interface wxml, il existe une liaison d'événement dans la vue masquée catchtouchmove="preventTouchMove". La raison en est de bloquer la transmission vers le bas des événements et d'éviter de pouvoir cliquer ou faire glisser l'interface sous le masque après la fenêtre pop-up. Si vous ne l'écrivez pas comme ça, si l'interface principale est une interface déroulante, pensez-y, l'utilisateur peut également faire fonctionner la liste déroulante lorsque la fenêtre pop-up apparaît, je pense que votre chef de produit viendra vers vous.

3. Interprétation du style : (Ce titre n'est pas marqué d'un bloc de code, mais il est toujours affiché comme un bloc de code. C'est un bug !!! - -)

.modal L'écriture des styles -mask et .modal-dialog nécessite une attention particulière.

L'essentiel est la relation hiérarchique. La fenêtre pop-up doit être sur la couche supérieure et non bloquée par l'interface. Ensuite, la couche de masquage doit bloquer l'interface, mais la fenêtre pop-up. ne peut pas être bloqué. Par conséquent, il convient de prêter attention aux valeurs z-index de .modal-mask et .modal-dialog.

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!