WeChat Mini Program Example: Code Implementation of Custom Dialog Box

This article brings you an example of a WeChat applet: the code implementation of a custom dialog box. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Custom modal dialog example

Because the display modal pop-up window provided by the official API can only simply display text content, the dialog content cannot be customized. It lacks flexibility, so I implemented a custom modal dialog box based on the principle of modal pop-up windows.

wx.showModal(OBJECT)

Customization

Modal dialog box

Involving files

Interface wxml

Style wxcss

Events and methods js

Rendering

Interface 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;
}

Events and methods.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 of implementation ideas and principles

Interface interpretation:
It is composed of a masked pop-up window, and the bound data {{showModal}} is used to control the display and hiding of the pop-up window

Interpretation of events and methods:
How to display the pop-up window:

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

How to make the pop-up window disappear:

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

There is something to pay special attention to here, which is the following method:

    preventTouchMove: function () {
    }

Why is it an empty method? Because it needs to be viewed in conjunction with the interface wxml, there is an event binding catchtouchmove="preventTouchMove" in the masked view. The reason for this is to block the downward transmission of events and avoid being able to click or slide the interface under the mask after the pop-up window. If you don't write it like this, if the main interface is a scrollable interface, think about it, the user can also operate the scrolling list when the pop-up window pops up, I think your product manager will come to you.

 3. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -)

The writing of .modal-mask and .modal-dialog styles requires special attention.
Mainly due to the hierarchical relationship, the pop-up window must be on the top layer and not blocked by the interface, and the masking layer must block the interface, but the pop-up window cannot be blocked. Therefore, the z-index values ​​of .modal-mask and .modal-dialog should be paid attention to.

Related recommendations:

How to reference the ivew weapp control in WeChat Mini Program

WeChat Mini Program Example: Implementation of Custom Navigation Bar method

The above is the detailed content of WeChat Mini Program Example: Code Implementation of Custom Dialog Box. For more information, please follow other related articles on the PHP Chinese website!