세 가지 미니 프로그램 이벤트를 소개합니다

본 글에서는 위챗 미니 프로그램 이벤트 이용 방법을 소개합니다.

1: 이벤트 버블링

WeChat미니 프로그램 개발 도구에서 새 이벤트 폴더를 만들고 새 파일을 만든 후 event.wxml에 다음 코드를 입력합니다.

1. <view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
     这里是view 1
       <view class="view2" bindtap="view2click" id="view2">
            这里是view 2
             <view class="view3" bindtap="view3click" id="view3">
                  这里是view 3
             </view>
       </view>
   </view>

   로그인 후 복사

이벤트에 다음 코드를 채워주세요.wxss:

.view1{
  height: 500rpx;
  width: 100%;
  background-color:beige;
}
.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

1. .view3{
     height: 300rpx;
     width: 60%;
     background-color:aqua;
   }

   로그인 후 복사

event.js에 다음 코드를 추가하세요.

1. //事件处理函数
     view1click : function(event){
       console.log("view1click")
     },
     view2click : function(){
       console.log("view2click")
     },
     view3click : function(event){
        console.log("view3click")
     },

   로그인 후 복사

컴파일하고 실행한 후 시뮬레이터에서 view3 영역을 클릭합니다. 그림 1과 같습니다. view3 외에도 view2와 view1의 클릭 이벤트가 모두 응답했습니다. 이것이 바로 클릭 이벤트 버블링입니다.

그림 1

2: 방지 이벤트 버블링

할 것

1. rreee

1. <view class="view3" bindtap="view3click" id="view3">

   로그인 후 복사

로 변경 ---이 수정되었습니다. catchtap

다른 코드는 변경되지 않은 채로 컴파일하고 실행하거나 view3 영역을 클릭합니다. 그림 2와 같이 로그 정보를 보려면 이벤트가 더 이상 버블링되지 않습니다.

그림 2

3: 이벤트 정보 수신

위 코드에서 view1click: function(event)들어오는 이벤트 이벤트 정보를 인쇄하는 코드를 다음과 같이 추가합니다. 그림 3과 같이 컴파일하고 실행합니다. :

1. 아아앙

그림 3

데이터세트에는 사용자 정의 속성 , ID: 100, 제목: "뉴스 제목"이 포함되어 있습니다. 이 사용자 정의 속성은 다음 코드에 설정됩니다:

1. <view class="view3" catchtap="view3click" id="view3">

   로그인 후 복사

【관련 권장 사항】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. WeChat 애플릿 전체 소스 코드 다운로드

3. 위챗 미니 프로그램 데모: 이미테이션 몰