一、微信小程序触屏事件
bindtouchstart:手指触摸动作开始
bindtouchmove:手指触摸后移动
bindend:手指触摸动作结束
属性 | 类型 | 说明 |
---|---|---|
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
Touch 对象
属性 | 类型 | 说明 |
---|---|---|
identifier | Number | 触摸点的标识符 |
pageX, pageY | Number | 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴 |
clientX, clientY | Number | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴 |
二、自定义实现上划,下划处理
原理:触点从屏幕滑动距离,超过指定像素大小触发处理。
从Y轴方向判断,超出距离,上划下划
从X轴方向判断,超出距离,作划右划
wxml代码:
<view class="block" bind:touchstart="startEvent" bind:touchmove="moveEvent" data-id="10"><view class="blue"><view>X:{{pageX}}</view><view>Y:{{pageY}}</view></view><view class="green"><view>X:{{pageX2}}</view><view>Y:{{pageY2}}</view></view><!-- <view class="inblock" bind:touchstart="startEvent" data-id="11"></view>-->
</view>
js:
startEvent(e) {var touches = e.touches;var touch = touches[0];var pageX = touch.pageX;var pageY = touch.pageY;this.setData({pageX: pageX,pageY})},moveEvent(e) {var touches = e.touches;var touch = touches[0];var pageX2 = touch.pageX;var pageY2 = touch.pageY;var pageX = this.data.pageX;var pageY = this.data.pageY;this.setData({pageX2,pageY2})//判断是否上划,是否下滑 50像素为参考if ((pageY2 - pageY) > 50) {console.info('下滑');}if ((pageY2 - pageY) < -50) {console.info('上滑动');}},
更多: