WeChat Mini 프로그램 터치 이벤트 소개-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

WeChat Mini 프로그램 터치 이벤트 소개

不言

Jun 23, 2018 pm 03:06 PM

이벤트 위챗 애플릿

이 글은 위챗 미니 프로그램의 터치 이벤트에 대한 관련 정보를 주로 소개합니다. 위챗 미니 프로그램을 개발할 때 필연적으로 사용하게 될 내용입니다. 여기서는 편집자가 해당 지식을 참고할 수 있도록 도와드립니다.

위챗 미니 프로그램 터치 이벤트:

위챗 미니 프로그램의 '이벤트'는 매우 흥미롭습니다. 문서를 읽은 후 해당 기능이 매우 완벽하고 이벤트가 상위 노드로 전달될 수 있으며 이 이벤트에 인쇄된 정보가 매우 투명하므로 디버깅이 매우 편리하다는 것을 알았습니다.
다음, 여기에 문서를 복사하세요

원본 주소: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

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

이벤트는 뷰 레이어에서 로직 레이어로의 통신 방법입니다.
이벤트는 처리를 위해 사용자 행동을 논리 계층에 피드백할 수 있습니다.
이벤트는 구성요소에 바인딩될 수 있습니다. 트리거 이벤트에 도달하면 논리 레이어의 해당 이벤트 처리 기능이 실행됩니다.
이벤트 개체는 ID, 데이터 세트, 터치와 같은 추가 정보를 전달할 수 있습니다.

이벤트 사용 방법

컴포넌트에 이벤트 핸들러 함수를 바인딩합니다.

bindtap과 같이 사용자가 컴포넌트를 클릭하면 해당 페이지의 해당 페이지에서 해당 이벤트 처리 기능을 찾을 수 있습니다.

클릭하세요!

해당 페이지 정의에 해당 이벤트 핸들러 함수를 작성하세요. 매개변수는 이벤트입니다.

Page({ 
 tapName: function(event) { 
 console.log(event) 
 } 
})

로그인 후 복사

로그 정보는 대략 다음과 같은 것을 확인할 수 있습니다.

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
}

로그인 후 복사

상세 이벤트 설명

이벤트 분류

이벤트는 버블링으로 구분됩니다. 이벤트 및 비 버블링 이벤트:

버블 이벤트: 구성 요소의 이벤트가 트리거되면 해당 이벤트가 상위 노드로 전달됩니다.

버블링되지 않는 이벤트: 구성 요소의 이벤트가 트리거되면 이벤트가 상위 노드로 전달되지 않습니다.

》》》이벤트 분류

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

클릭(탭)

더블 클릭(dbtap)

롱 탭. (longtap)
Sliding

Multi-touch

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
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;)
}

로그인 후 복사

더블클릭

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

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

로그인 후 복사

3. 길게 누르기

손가락이 이벤트에 닿은 후 350ms 이상 그대로 둡니다.

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
 bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + &#39;- touch start&#39;)
},//长按事件mylongtap: function(e){ console.log(e.timeStamp + &#39;- long tap&#39;)
 },mytouchend: function(e){ console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){ console.log(e.timeStamp + &#39;- tap&#39;)
}

로그인 후 복사

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

Event트리거 시퀀스

click

touchstart → touchend → tap

더블클릭

touchstart → touchend → tap → touchstart → touchend → tap

터치스타트 → 길게 누르기 → 터치엔드 → 탭

4.滑动

手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。滑动事件由touchstart、touchmove、touchend组成

坐标图：

以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）。
假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by < ay;
同理，向右滑动到C(cx,cy),满足cx > ax；向下滑动到D(dx,dy),满足dy > ay；向左移动到E(ex，ey)满足ex < ax.
计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n
计算r = m/n,如果r > 1,视为向上滑动。
同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动。

以上没考虑r为1的情况。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button>
</view>

로그인 후 복사

5.多点触控

由于模拟器尚不支持多点触控，内测开放后，继续补充。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7696

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

Xianyu WeChat 미니 프로그램 공식 출시 Feb 10, 2024 pm 10:39 PM

Xianyu의 공식 WeChat 미니 프로그램이 조용히 출시되었습니다. 미니 프로그램에서는 비공개 메시지를 게시하여 구매자/판매자와 소통하고, 개인 정보 및 주문 보기, 상품 검색 등을 할 수 있습니다. 궁금하시다면 Xianyu WeChat mini가 무엇인가요? 프로그램을 살펴볼까요? Xianyu WeChat 애플릿의 이름은 무엇입니까? 답변: Xianyu, 유휴 거래, 중고 판매, 평가 및 재활용. 1. 미니 프로그램에서는 대기 메시지 게시, 비공개 메시지를 통한 구매자/판매자와의 커뮤니케이션, 개인 정보 및 주문 보기, 특정 항목 검색 등을 할 수 있습니다. 2. 미니 프로그램 페이지에는 근처에 홈페이지가 있습니다. 유휴 게시, 메시지, 내 5가지 기능 3. 사용하려면 구매하기 전에 WeChat 결제를 활성화해야 합니다.

iPhone 잠금 화면에서 예정된 캘린더 이벤트 받기 Dec 01, 2023 pm 02:21 PM

iOS 16 이상을 실행하는 iPhone에서는 예정된 캘린더 이벤트를 잠금 화면에 직접 표시할 수 있습니다. 이 작업이 어떻게 수행되었는지 알아보려면 계속 읽어보세요. 시계 페이스 컴플리케이션 덕분에 많은 Apple Watch 사용자는 손목을 통해 다음 캘린더 이벤트를 확인하는 데 익숙합니다. iOS16 및 잠금 화면 위젯의 등장으로 기기 잠금을 해제하지 않고도 iPhone에서 직접 동일한 캘린더 이벤트 정보를 볼 수 있습니다. 캘린더 잠금 화면 위젯은 두 가지 형태로 제공되며, 다음 예정된 이벤트 시간을 추적하거나 이벤트 이름과 시간을 표시하는 더 큰 위젯을 사용할 수 있습니다. 위젯 추가를 시작하려면 Face ID 또는 Touch ID를 사용하여 iPhone을 잠금 해제하고 길게 누르세요.

WeChat 애플릿은 사진 업로드 기능을 구현합니다. Nov 21, 2023 am 09:08 AM

WeChat 애플릿은 사진 업로드 기능을 구현합니다. 모바일 인터넷의 발전으로 WeChat 애플릿은 사람들의 삶에 없어서는 안될 부분이 되었습니다. WeChat 미니 프로그램은 다양한 애플리케이션 시나리오를 제공할 뿐만 아니라 이미지 업로드 기능을 포함한 개발자 정의 기능도 지원합니다. 이 기사에서는 WeChat 애플릿에서 이미지 업로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 준비 작업 코드 작성을 시작하기 전에 WeChat 개발자 도구를 다운로드하여 설치하고 WeChat 개발자로 등록해야 합니다. 동시에 WeChat도 이해해야 합니다.

WeChat 애플릿에서 드롭다운 메뉴 효과 구현 Nov 21, 2023 pm 03:03 PM

WeChat 미니 프로그램에서 드롭다운 메뉴 효과를 구현하려면 구체적인 코드 예제가 필요합니다. 모바일 인터넷의 인기로 인해 WeChat 미니 프로그램은 인터넷 개발의 중요한 부분이 되었으며 점점 더 많은 사람들이 관심을 갖고 주목하기 시작했습니다. WeChat 미니 프로그램을 사용하세요. WeChat 미니 프로그램 개발은 기존 APP 개발보다 간단하고 빠르지만 특정 개발 기술을 숙달해야 합니다. WeChat 미니 프로그램 개발에서 드롭다운 메뉴는 일반적인 UI 구성 요소로, 더 나은 사용자 경험을 제공합니다. 이 기사에서는 WeChat 애플릿에서 드롭다운 메뉴 효과를 구현하는 방법을 자세히 소개하고 실용적인 정보를 제공합니다.

WeChat 애플릿을 사용하여 캐러셀 전환 효과 달성 Nov 21, 2023 pm 05:59 PM

WeChat 애플릿을 사용하여 캐러셀 전환 효과를 얻으세요. WeChat 애플릿은 개발 및 사용이 간단하고 효율적인 경량 애플리케이션입니다. WeChat 미니 프로그램에서는 캐러셀 전환 효과를 달성하는 것이 일반적인 요구 사항입니다. 이 기사에서는 WeChat 애플릿을 사용하여 캐러셀 전환 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 WeChat 애플릿의 페이지 파일에 캐러셀 구성 요소를 추가합니다. 예를 들어 <swiper> 태그를 사용하여 캐러셀의 전환 효과를 얻을 수 있습니다. 이 구성 요소에서는 b를 전달할 수 있습니다.

WeChat 미니 프로그램에 이미지 필터 효과 구현 Nov 21, 2023 pm 06:22 PM

WeChat 미니 프로그램에서 사진 필터 효과 구현 소셜 미디어 애플리케이션의 인기로 인해 사람들은 사진의 예술적 효과와 매력을 높이기 위해 사진에 필터 효과를 적용하는 것을 점점 더 좋아하고 있습니다. WeChat 미니 프로그램에서도 사진 필터 효과를 구현할 수 있어 사용자에게 더욱 흥미롭고 창의적인 사진 편집 기능을 제공합니다. 이 기사에서는 WeChat 미니 프로그램에서 이미지 필터 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 WeChat 애플릿의 캔버스 구성 요소를 사용하여 이미지를 로드하고 편집해야 합니다. 페이지에서 캔버스 구성요소를 사용할 수 있습니다.

Xianyu WeChat 애플릿의 이름은 무엇입니까? Feb 27, 2024 pm 01:11 PM

Xianyu의 공식 WeChat 미니 프로그램이 사용자에게 유휴 항목을 쉽게 게시하고 거래할 수 있는 편리한 플랫폼을 제공하기 위해 조용히 출시되었습니다. 미니 프로그램에서는 비공개 메시지를 통해 구매자 또는 판매자와 소통할 수 있으며, 개인정보 및 주문 조회, 원하는 상품을 검색할 수 있습니다. 그렇다면 WeChat 미니 프로그램에서 Xianyu는 정확히 무엇이라고 불리나요? 이 튜토리얼 가이드에서는 이에 대해 자세히 소개합니다. 알고 싶은 사용자는 이 기사를 따라 계속 읽어보세요! Xianyu WeChat 애플릿의 이름은 무엇입니까? 답변: Xianyu, 유휴 거래, 중고 판매, 평가 및 재활용. 1. 미니 프로그램에서는 대기 메시지 게시, 비공개 메시지를 통한 구매자/판매자와의 커뮤니케이션, 개인 정보 및 주문 보기, 특정 항목 검색 등을 할 수 있습니다. 2. 미니 프로그램 페이지에는 근처에 홈페이지가 있습니다. 유휴 게시, 메시지 및 5가지 기능.

WeChat 애플릿에서 이미지 회전 효과 구현 Nov 21, 2023 am 08:26 AM

WeChat 미니 프로그램에서 이미지 회전 효과를 구현하려면 구체적인 코드 예제가 필요합니다. WeChat 미니 프로그램은 사용자에게 풍부한 기능과 좋은 사용자 경험을 제공하는 경량 애플리케이션입니다. 미니 프로그램에서 개발자는 다양한 구성 요소와 API를 사용하여 다양한 효과를 얻을 수 있습니다. 그 중 그림 회전 효과는 미니프로그램에 흥미와 시각 효과를 더할 수 있는 일반적인 애니메이션 효과이다. WeChat 미니 프로그램에서 이미지 회전 효과를 얻으려면 미니 프로그램에서 제공하는 애니메이션 API를 사용해야 합니다. 다음은 방법을 보여주는 특정 코드 예제입니다.

See all articles

WeChat Mini 프로그램 터치 이벤트 소개

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제