WeChat 미니 프로그램의 사용자 정의 모달 대화 상자 예에 대한 자세한 설명

이 글은 WeChat 애플릿 사용자 정의 모달 대화 상자 인스턴스의 관련 정보를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

공식 API에서 제공하는 디스플레이 모달 팝업으로 인해 창은 단순히 텍스트만 표시할 수 있습니다. 유연성이 부족하여 대화 상자 내용을 사용자 정의할 수 없으므로 모달 팝업 창의 원리를 기반으로 사용자 정의 모달 대화 상자를 구현했습니다.

wx.showModal(OBJECT)
사용자 정의
모달 대화 상자

관련 파일

interfacewxml
stylewxcss
이벤트 및 방법js

렌더링

인터페이스 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 andmethods.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();
 }
})

구현 아이디어 해석 및 원리

인터페이스 해석:

작성됨 마스크 레이어 + 팝업 창, 바인딩된 데이터 {{showModal}}을 사용하여 팝업 창의 표시 및 숨기기를 제어합니다

이벤트 및 메서드 해석:
팝업 창 표시 방법:

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

팝업창 사라지게 하는 방법:

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

여기서 특별히 주의할 점이 있는데, 다음 방법입니다.

preventTouchMove: function () {
 }

왜 비어있나요? 방법? wxml 인터페이스와 함께 봐야 하기 때문에 마스크드 뷰에 catchtouchmove="preventTouchMove" 이벤트 바인딩이 있습니다. 이 글을 쓰는 이유는 이벤트의 하향 전송을 차단하고 팝업창 이후 마스크 아래의 인터페이스를 클릭하거나 슬라이드할 수 없도록 하기 위해서입니다. 이렇게 작성하지 않고 메인 인터페이스가 스크롤 가능한 인터페이스라면 생각해보면 팝업창이 뜰 때 사용자가 스크롤 목록을 조작할 수도 있으면 제품 관리자가 찾아올 것 같아요.

3. 스타일 해석: (이 제목에는 코드 블록 식별자가 없지만 여전히 코드 블록처럼 표시됩니다. 이것은 버그입니다!!! - -)

.modal-mask 및 . 모달 대화 스타일 특별한 주의가 필요합니다.

가장 중요한 것은 팝업 창이 상단에 있어야 하고 인터페이스에 의해 차단되어서는 안 됩니다. 그런 다음 마스킹 레이어가 인터페이스를 차단해야 하지만 팝업 창은 차단할 수 없습니다. 따라서 .modal-mask 및 .modal-dialog의 z-index 값에 주의해야 합니다.

위 내용은 WeChat 미니 프로그램의 사용자 정의 모달 대화 상자 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!