WeChat 개발 소개 (4) 터치 이벤트

》》》이벤트란 무엇인가요?

• 이벤트는 뷰 레이어에서 로직 레이어로의 통신 방식입니다. .

• 이벤트는 처리를 위해 사용자 행동을 논리 계층에 피드백할 수 있습니다.

• 이벤트는 트리거 이벤트에 도달하면 논리 계층의 해당 이벤트 처리 기능이 실행됩니다.

• 이벤트 객체는 ID, 데이터세트, 터치와 같은 추가 정보를 전달할 수 있습니다.

》》》이벤트 분류

• 터치시작 손가락 터치

• 터치터치 후 손가락 이동

• touchcancel 팝업창, 전화 수신 알림 등 손가락 터치 동작이 중단됩니다.

• touchend 손가락 터치 동작이 종료됩니다

• 손가락 터치 후 왼쪽 탭

• 350ms 이상 손가락 터치 후 왼쪽 길게 탭

》 》》이벤트 바인딩

이벤트 바인딩은 컴포넌트 속성과 동일한 방식으로 키와 값의 형태로 작성됩니다.

• 키는 바인드 또는 캐치로 시작하고 그 뒤에는 바인드탭, 캐치터치스타트와 같은 이벤트 유형이 옵니다.

• 값은 문자열입니다. 해당 페이지에 동일한 이름의 함수를 정의해야 합니다. 그렇지 않으면 이벤트가 트리거될 때 오류가 보고됩니다. 바인드 이벤트 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지하지 않으며, 이벤트 잡기 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지할 수 있습니다.

위에서 미니프로그램 이벤트의 기본을 간략하게 소개했습니다. 이제 '이벤트'의 힘을 보여줄 차례입니다.

• 클릭( 탭)

• 더블탭(dbtap)

• 롱탭(longtap)

• 스와이프

• 멀티 터치

1. 클릭

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

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

mytouchstart: function(e){    console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){    console.log(e.timeStamp + '- touch end')
},mytap: function(e){    console.log(e.timeStamp + '- tap')
}

2. 더블클릭

더블클릭 이벤트는 두 번의 클릭 이벤트로 구성되며 300ms 미만으로 간주됩니다. 더블 클릭, WeChat 공식 문서에는 더블 클릭이 포함되지 않습니다. 이벤트에서는 개발자가 자체 처리를 정의해야 합니다.

아아아아

길게 누르기

길게 누르기 이벤트 손가락이 닿은 후 떠나기까지 350ms 이상이 걸립니다.

<view>
  <button type="primary" bindtap="mytap">点我吧</button>
</view>

rrree

클릭, 더블클릭, 길게 누르기 등은 터치 시작, 터치 엔드, 탭 이벤트를 트리거하는 터치 이벤트입니다. 터치 취소 이벤트는 실제 환경에서만 시뮬레이션할 수 있습니다. 장치이므로 더 이상 말하지 않겠습니다.

事件	触发顺序
单击	touchstart → touchend → tap
双击	touchstart → touchend → tap → touchstart → touchend → tap
长按	touchstart → longtap → touchend → tap

4. 슬라이드

아래 예에서는 손가락으로 화면을 터치하여 이동합니다. 슬라이딩 이벤트는 touchstart, touchmove, touchend로 구성됩니다.

좌표도:

1. 기반 화면에서 좌측 상단이 직각좌표계를 구축하기 위한 원점입니다. 네 번째 사분면은 휴대폰 화면입니다. Y축이 낮을수록 좌표 값이 커집니다(수학적 사분면과의 차이에 유의하세요).

2. A 지점이 터치스타트 이벤트의 터치 지점이고 좌표가 A(ax,ay)이고 손가락이 B(bx,by) 지점까지 미끄러진다고 가정하면, 그러면

3. 마찬가지로 C(cx,cy)로 오른쪽으로 슬라이드하면 cx > ax; , dy > ay;를 만족하려면 E(ex, ey)를 왼쪽으로 이동하여 ex

4. Y축의 선분 AB의 투영 길이를 다음과 같이 계산합니다. m, X축의 투영 길이를 n

5. r = m/n으로 계산하고, r > 1이면 위쪽으로 미끄러지는 것으로 간주됩니다.

6. 마찬가지로 선분 AC, AD, AE의 Y축 투영 길이와 X축 투영 길이의 비율을 계산하여 슬라이딩을 구합니다. 오른쪽, 아래쪽, 왼쪽.

위에서는 r이 1인 경우를 고려하지 않았습니다.

[관련 추천]

1.

위챗 공개계정 플랫폼 소스코드 다운로드

2.위챗 투표 소스코드

3. WeChat Lala Takeaway 2.2.4 WeChat 루빅스 큐브 소스 코드의 복호화된 오픈 소스 버전

위 내용은 WeChat 개발 소개 (4) 터치 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!