위 챗 애플 릿 보기 컨트롤 과 bindtap 사이 의 문제 해결

위 챗 애플 릿 에서 가장 많이 사용 되 는컨트롤 은 bindtap(거품 반응),예 를 들 어형식 으로 ItemOnclick 이 벤트 를 연결 하고 dataset 를 전달 할 수 있 습 니 다.mType 이라는 요소 값 은 123 입 니 다.
어떤 디자인 에서
다음 과 같은 구조 가 있 습 니 다.


  <view class="func-m" bindtap="ItemOnclick" data-mType="123">
    <image src="{{ROOT_PATH}}/images/icon1.png" />
  </view>

ItemOnclick 이 벤트 는 그림 을 클릭 할 때 터치 하지 않 습 니 다.그림 이외 및 외부 view 범위 내 에 있 는 곳 을 클릭 해 야 터치 합 니 다.
bindtap 을탭 에 쓰 면 그림 을 거꾸로 클릭 하면 터치 되 지만 그림 이외 및 외부 view 범위 내 에 있 는 곳 을 클릭 하면 터치 되 지 않 습 니 다.
이로부터 나 는 판단 을 내 렸 다.
이 벤트 를 누 르 면 부모 나 하위 컨트롤 에 전달 되 지 않 습 니 다.
(그러나 이것 은 거품 반응 의 정의 와 일치 하지 않 는 다)
하지만 최근 에는 또 다음 과 같은 상황 에 부 딪 혔 다.


<view style="background-color:#eee;" bindtap="HideMenuList"><!--     view-->
  <image src="{{ROOT_PATH}}/images/icon1.png" bindtap="ShowMenuList" />
  <view class="menu-list">
     <view class="menu-item" data-mType="CP" bindtap="MenuItemOnclick">
     </view>
     <view class="menu-item" data-mType="HW" bindtap="MenuItemOnclick">
     </view>
   </view>
</view>

그림 을 클릭 하여 메뉴 목록 을 표시 하고 메뉴 항목 마다 메뉴 항목 을 클릭 하여 MenuItemOnclick 이 벤트 를 터치 하고 해당 하 는 인 자 를 전달 해 야 합 니 다.
그리고실제 효 과 는 그림 을 클릭 할 때 메뉴 목록 이 깜빡 사라 지고 표시 되 지 않 을 때 가 있다 는 것 이다.
나중에 인쇄 log 를 통 해 그림 을 클릭 하여 ShowMenuList 사건 을 촉발 한 후 HideMenuList 사건 도 촉발 되 었 음 을 알 수 있 습 니 다.(또한 항상 ShowMenuList 사건 이후)
즉,이벤트 가에서 외부 로 전 달 된를 누 르 면 Hide MenuList 이벤트 가 발생 합 니 다.
그러면 그 전에 판단 이 틀 렸 어 요.
이 두 가지 상황 사이 의 관건 적 인 차 이 는 아직 찾 지 못 했 습 니 다.두 번 째 상황 의 해결 방안 은 메뉴 를 표시 할 때 메뉴 목록 을 제외 한 영역 을 투명 커버 층 으로 덮어 쓰 는 것 입 니 다.이 투명 커버 층 을 클릭 한 후 Hide MenuList 이 벤트 를 터치 하여 커버 층 을 없 애 거나 숨 기 는 것 입 니 다.
PS:두 번 째 상황 의 방식 은 이전에 html 와 Android 환경 에서 모두 사 용 된 적 이 있 는데 이 문 제 는 없 었 습 니 다.아마도 위 챗 애플 릿 의 기본 체 제 는 html 와 Android 와 다 를 수 있 으 므 로 깊이 연구 해 야 합 니 다.
위 챗 애플 릿 bindtap 와 catchtap 의 차이 점 에 대한 상세 한 설명
공식 문서 참조https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
bindtap 과 catchtap 은 사용자 가 이 구성 요 소 를 클릭 할 때 해당 페이지 에 해당 하 는 Page 에서 해당 하 는 이벤트 처리 함 수 를 찾 습 니 다.
bid 이벤트 바 인 딩 은 거품 사건 이 위로 올 라 가 는 것 을 막 지 않 습 니 다.catch 이벤트 바 인 딩 은 거품 사건 이 위로 올 라 가 는 것 을 막 을 수 있 습 니 다:


//   
<view id="outer" bindtap="handleTap1">   //      bindtap     handleTap1
 outer view
 <view id="middle" catchtap="handleTap2"> //      catchtap     handleTap2
  middle view
  <view id="inner" bindtap="handleTap3"> //      bindtap     handleTap3
   inner view
  </view>
 </view>
</view>


//   
Page({
  handleTap1:function(event){  
  //  handleTap1   outer view bindtap  
   console.log("outer view bindtap") 
  },
  handleTap2: function (event) { 
  //  handleTap2   middle view catchtap
   console.log("middle view catchtap") 
  },
  handleTap3: function (event) { 
  //  handleTap3   inner view bindtap middle view catchtap 
   console.log("inner view bindtap") 
  },

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

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

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

애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자

이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...

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

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

위 챗 애플 릿 보기 컨트롤 과 bindtap 사이 의 문제 해결

좋은 웹페이지 즐겨찾기