WeChat Mini 프로그램 예: 사용자 정의 대화 상자의 코드 구현

不言

풀어 주다： 2018-08-21 17:51:51

원래의

2326명이 탐색했습니다.

이 기사는 WeChat 애플릿의 예를 제공합니다: 사용자 정의 대화 상자의 코드 구현. 여기에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 될 수 있기를 바랍니다.

사용자 정의 모달 대화 상자 인스턴스

공식 API에서 제공하는 표시 모달 팝업 창은 단순히 텍스트 내용만 표시할 수 있고 대화 상자 내용을 사용자 정의할 수 없기 때문에 유연성이 부족하여 모달을 사용할 수 있습니다. 사용자 정의 모달 대화 상자는 창 원리의 관점에서 구현됩니다.

wx.showModal(OBJECT)

Customized

modal 대화 상자

rendering

WeChat Mini 프로그램 예: 사용자 정의 대화 상자의 코드 구현

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

로그인 후 복사

이벤트 및 메소드.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. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -)

로그인 후 복사

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