一、微信小程序触屏事件
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('上滑动');
}
},
更多：
