위 챗 애플 릿 사용자 정의 모드 대화 상자 인 스 턴 스 상세 설명

공식 API 가 제공 하 는 디 스 플레이 모드 팝 업 창 은 문자 내용 만 간단하게 표시 할 수 있 고 대화 상자 내용 을 사용자 정의 할 수 없 으 며 유연성 이 부족 하기 때문에 스스로 모드 팝 업 창의 원리 측면 에서 사용자 정의 모드 대화 상 자 를 실현 했다.
wx.showModal(OBJECT)
사용자 정의
모드 대화 상자
관련 문건
인터페이스 wxml
스타일 wxcss
이벤트 및 방법
효과 도


인터페이스 코드.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>

스타일

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

이벤트 및 방법

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();
 }
})

사고의 해석 과 원 리 를 실현 하 다.
인터페이스 판독:
바 인 딩 된 데이터{쇼 Modal}}로 팝 업 창의 표시 와 숨 김 을 제어 합 니 다.
이벤트 및 방법 해석:
팝 업 창 표시 방법:

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

팝 업 창 을 없 애 는 방법:

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

여기 특별히 주의해 야 할 점 이 있 습 니 다.바로 아래 의 이 방법 입 니 다.

preventTouchMove: function () {
 }

왜 빈 방법 이에 요?인터페이스 wxml 를 결합 하여 보 려 면 몽 층 view 에 catchtouchmove="preventTouchMove"를 연결 하 는 이벤트 가 있 습 니 다.이 양 서 는 이벤트 가 아래로 전달 되 는 것 을 차단 하고 팝 업 창 뒤에서 클릭 하거나 미끄럼 을 피 할 수 있 기 때 문 입 니 다.만약 이렇게 쓰 지 않 는 다 면,메 인 인터페이스 가 스크롤 할 수 있 는 인터페이스 라면,생각해 보 세 요.팝 업 창 이 팝 업 될 때 사용 자 는 스크롤 목록 을 조작 할 수 있 습 니 다.당신 의 제품 매니저 가 당신 을 찾 아 올 것 이 라 고 생각 합 니 다.
 3.스타일 해석:(이 제목 은 코드 블록 표 지 를 추가 하지 않 았 지만 코드 블록 처럼 표시 되 었 습 니 다.이것 은 bug 입 니 다!!-)
.modal-mask 와.modal-dialog 스타일 의 작성 방법 은 특히 주의해 야 합 니 다.
주로 등급 관계 이다.탄창 은 최상 위 에 있어 야 하고 인터페이스 에 가 려 지지 않 아야 한다.그 다음 에 몽 층 은 인 터 페 이 스 를 가 려 야 하지만 탄창 을 가 려 서 는 안 된다.따라서.modal-mask 와.modal-dialog 의 z-index 값 은 주의해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.