WeChat 미니 프로그램의 세 가지 유형의 이벤트 샘플 코드

高洛峰
풀어 주다: 2017-02-27 14:38:19
원래의
2314명이 탐색했습니다.

이 글에서는 위챗 미니 프로그램의 세 가지 이벤트를 주로 소개하고 코드와 함께 예시를 제공합니다.

미니 프로그램에는 크게 세 가지 이벤트가 있습니다.
1클릭 이벤트

2더블 클릭 이벤트

3-길게 누르기 이벤트

클릭 이벤트는 터치스타트와 터치엔드로 구성되며, 터치엔드 이후에 탭 이벤트가 발생합니다.
(1) 클릭 이벤트

코드 보기

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
로그인 후 복사

JS 코드

mytouchstart: function(e){  
  console.log(e.timeStamp + &#39;- touch start&#39;)
},mytouchend: function(e){
   console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){  
  console.log(e.timeStamp + &#39;- tap&#39;)
}
로그인 후 복사

여기서는 터치 시작 이벤트가 바인딩터치스타트 함수를 통해 바인딩되고, 바인드터치엔드 함수가 바인딩됩니다. 터치가 끝나면 이벤트가 발생합니다.
그리고 이 두 가지 이벤트 함수의 내용을 js 코드로 구현할 수 있습니다.

(2) 더블 클릭 이벤트

더블 클릭 이벤트는 두 번의 클릭 이벤트로 구성되며 두 번의 클릭 사이의 간격은 300ms 미만이며 WeChat 공식 문서에서는 두 번 클릭으로 간주됩니다. 두 번 클릭 이벤트가 없으며 개발자는 자체 처리를 정의해야 합니다.
보기


클릭

JS코드

WeChat 미니 프로그램의 세 가지 유형의 이벤트 샘플 코드

(3) 길게 누르기

이후 길게 누르기 이벤트에서는 손가락을 터치한 후 350ms 이상 후에 왼쪽으로 이동합니다.
코드 보기

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
로그인 후 복사

JS 코드

mytouchstart: function(e){   
 console.log(e.timeStamp + &#39;- touch start&#39;)
},
//长按事件
mylongtap: function(e){   
 console.log(e.timeStamp + &#39;- long tap&#39;)
},
 console.log(e.timeStamp + &#39;- touch end&#39;)
},
mytap: function(e){   
 console.log(e.timeStamp + &#39;- tap&#39;)
}
로그인 후 복사


WeChat 미니 프로그램의 세 가지 이벤트 샘플 코드에 대한 자세한 관련 기사를 보려면 주의하세요. PHP 중국어 웹사이트로!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!