Beispiel für ein WeChat Mini-Programm: Code-Implementierung eines benutzerdefinierten Dialogfelds

Der Inhalt dieses Artikels befasst sich mit WeChat-Applet-Beispielen: Code-Implementierung benutzerdefinierter Dialogfelder, die einen gewissen Referenzwert haben. Ich hoffe, dass sie für Sie hilfreich sind.

Benutzerdefinierte modale Dialoginstanz

Aufgrund des von der offiziellen API bereitgestellten modalen Popup-Fensters kann nur Textinhalt angezeigt und der Dialoginhalt nicht angepasst werden Flexibilität, daher habe ich ein benutzerdefiniertes modales Dialogfeld implementiert, das auf dem Prinzip modaler Popup-Fenster basiert.

wx.showModal(OBJECT)

Angepasstes

modales Dialogfeld

Beteiligte Datei

Schnittstelle wxml

Stil wxcss

Ereignisse und Methoden js

Rendering

Schnittstelle code.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 von Implementierungsideen und -prinzipien

Schnittstelleninterpretation:
Es besteht aus einer Maskenebene + einem Popup-Fenster, und die gebundenen Daten {{showModal}} werden verwendet, um das Ein- und Ausblenden des Popup-Fensters zu steuern

Interpretation von Ereignissen und Methoden:
So zeigen Sie das Popup-Fenster an:

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

So lässt man das Popup-Fenster verschwinden:

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

Hier gibt es etwas, auf das man besonders achten muss, nämlich die folgende Methode:

preventTouchMove: function () {
}

Warum ist das so? 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. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -)

Die Art und Weise, wie .modal-mask- und .modal-dialog-Stile geschrieben werden, erfordert besondere Aufmerksamkeit.
Die Hauptsache ist die hierarchische Beziehung. Das Popup-Fenster muss sich auf der obersten Ebene befinden und darf nicht von der Schnittstelle blockiert werden. Dann muss die Maskenebene die Schnittstelle blockieren, aber das Popup-Fenster kann nicht blockiert werden. Daher sollten die Z-Indexwerte von .modal-mask und .modal-dialog beachtet werden.

Verwandte Empfehlungen:

So referenzieren Sie die IEW-WeApp-Steuerung im WeChat-Miniprogramm

Beispiel für das WeChat-Miniprogramm: Implementierung einer benutzerdefinierten Navigation bar-Methode

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat Mini-Programm: Code-Implementierung eines benutzerdefinierten Dialogfelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!