本文主要是介绍微信小程序触屏事件_上划下划事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、微信小程序触屏事件
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('上滑动');}},
更多：
微信小程序事件绑定
微信小程序实现打分效果代码整理
微信小程序分享、转发朋友、分享朋友圈使用整理
这篇关于微信小程序触屏事件_上划下划事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
