이 글은 위챗 미니 프로그램의 터치 이벤트에 대한 관련 정보를 주로 소개합니다. 위챗 미니 프로그램을 개발할 때 필연적으로 사용하게 될 내용입니다. 여기서는 편집자가 해당 지식을 참고할 수 있도록 도와드립니다.
위챗 미니 프로그램 터치 이벤트:
위챗 미니 프로그램의 '이벤트'는 매우 흥미롭습니다. 문서를 읽은 후 해당 기능이 매우 완벽하고 이벤트가 상위 노드로 전달될 수 있으며 이 이벤트에 인쇄된 정보가 매우 투명하므로 디버깅이 매우 편리하다는 것을 알았습니다.
원본 주소: 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 + '- touch start')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
} 로그인 후 복사
더블클릭
더블클릭 이벤트는 두 번의 클릭 이벤트로 구성되며, 두 번의 클릭 사이의 간격은 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 + '- touch start')
},//长按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
} 로그인 후 복사
클릭, 더블클릭, 길게 누르기 등은 터치 시작, 터치 엔드, 탭 이벤트를 트리거하는 터치 이벤트이므로 터치 취소 이벤트는 실제 기기에서만 시뮬레이션할 수 있습니다. 더 말하지 마세요.
Event
click
더블클릭
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中文网！
相关推荐：
微信小程序
监听手势滑动切换页面的实现
微信小程序中的onLoad的解析
위 내용은 WeChat Mini 프로그램 터치 이벤트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
2019-04-16 16:04:28
2020-09-15 11:26:00
2020-09-10 14:26:14
2020-09-08 11:06:15
2020-09-09 09:46:36
2020-10-12 14:51:04
2020-09-10 14:40:02
2019-04-24 16:20:55
2020-10-13 11:40:03
2019-04-15 14:06:21
touchstart → touchend → tap
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
