위 챗 애플 릿 사용자 정의 순수 모드 상자(팝 업 상자)의 인 스 턴 스 코드

공식 API 가 제공 하 는 모드 상 자 는 간단 한 문자 만 표시 할 수 있 지만 실제 응용 장면 에서 우 리 는 모드 상자 에 다양한 구성 요소 와 스타일 을 표시 할 수 있어 야 하기 때문에 이 를 바탕 으로 사용자 정의 정제 판 을 제공 할 수 있 는 모드 상 자 를 모 의 하여 다양한 수 요 를 만족 시 킬 수 있 습 니 다.
효과 그림:

WXML:


<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
              ，              
</view>

WXSS:


/*     */
 
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
}
 
.modal-dialog {
 box-sizing:border-box;
 width: 85%;
 padding:30rpx;
 overflow: hidden;
 position: fixed;
 top: 20%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 9999;
 background: white;
 border-radius: 5rpx;
}

JS:


data: {
 showModal: false, //false      true     
 },
 /**
 *        touchmove  
 */
 preventTouchMove: function () {
 },
 /**
 *        
 */
 hideModal() {
 var that = this;
 that.setData({
  showModal: false,
 })
 },

모드 상 자 를 열 려 면 탭 에 이벤트 하 나 를 연결 하고 data 의 showModal 을 true 로 설정 하면 됩 니 다.
이것 은 가장 깨끗 한 버 전 으로 개인 이 자주 사용 하기 때문에 여러분 의 개발 효율 을 가속 화 할 수 있 기 를 바 랍 니 다.
위 챗 애플 릿 사용자 정의 순수 모드 상자(팝 업 상자)의 인 스 턴 스 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 사용자 정의 모드 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿 사용자 정의 순수 모드 상자(팝 업 상자)의 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기