Ausführliche Erläuterung von Beispielen für benutzerdefinierte modale Dialogfelder in WeChat-Miniprogrammen

Dieser Artikel stellt hauptsächlich die relevanten Informationen zu benutzerdefinierten modalen Dialoginstanzen im Detail vor. Interessierte Freunde können darauf verweisen.

Aufgrund der bereitgestellten modalen Popup-Anzeige der offiziellen API Das Fenster kann nur Textinhalte anzeigen und den Inhalt des Dialogfelds nicht anpassen. Da es an Flexibilität mangelt, habe ich ein benutzerdefiniertes modales Dialogfeld implementiert, das auf dem Prinzip modaler Popup-Fenster basiert.

wx.showModal(OBJECT)
Angepasster
modaler Dialog

Beteiligte Dateien

Schnittstellewxml
Stilwxcss
Ereignisse und Methodenjs

Rendering

Schnittstellencode.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;
}

Ereignisse und Methoden.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();
 }
})

Interpretation und Prinzipien von Umsetzungsideen

Schnittstelleninterpretation:

besteht aus einer Maskenebene + einem Popup-Fenster, und die gebundenen Daten {{showModal}} werden verwendet, um das Anzeigen und Ausblenden des Popup-Fensters

zu steuern

Ereignis- und Methodeninterpretation:
So lassen Sie das Popup-Fenster anzeigen:

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

So lassen Sie das Popup-Fenster verschwinden:

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

Hier gibt es etwas, worauf man besonders achten sollte, nämlich die folgende Methode:

preventTouchMove: function () {
 }

Warum ist es eine leere Methode? Da es in Verbindung mit der Schnittstelle wxml angezeigt werden muss, gibt es in der maskierten Ansicht eine Ereignisbindung catchtouchmove="preventTouchMove". Der Grund dafür besteht darin, die Übertragung von Ereignissen nach unten zu blockieren und zu vermeiden, dass die Schnittstelle nach dem Popup-Fenster unter der Maske angeklickt oder verschoben werden kann. Wenn Sie es nicht so schreiben, wenn die Hauptschnittstelle eine scrollbare Schnittstelle ist, denken Sie darüber nach, der Benutzer kann auch die Bildlaufliste bedienen, wenn das Popup-Fenster angezeigt wird. Ich denke, Ihr Produktmanager wird zu Ihnen kommen.

3. Stilinterpretation: (Dieser Titel ist nicht mit einem Codeblock markiert, wird aber dennoch wie ein Codeblock angezeigt. Das ist ein Fehler!!! - -)

.modal Das Schreiben der Stile -mask und .modal-dialog erfordert besondere Aufmerksamkeit.

Die Hauptsache ist die hierarchische Beziehung. Das Popup-Fenster muss sich auf der obersten Ebene befinden und darf nicht durch die Schnittstelle blockiert werden, sondern durch das Popup-Fenster kann nicht blockiert werden. Daher sollten die Z-Indexwerte von .modal-mask und .modal-dialog beachtet werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für benutzerdefinierte modale Dialogfelder in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!