微信小程序判断当前手势滑动方向

(注：文字可能有点多可以直接复制代码到开发者工具上预览)
功能描述：文章适用于微信小程序根据滑动手势方向进行不同操作

主要点：touchstart、touchend

实现思路：
变量解释：startY(开始Y坐标)、startX(开始X坐标)、touchMoveY（结束Y坐标）、touchMoveX（结束X坐标）

1.主要通过touchstart事件获取手势开始时的X、Y坐标，通过touchend获取手势结束时的X、Y坐标。
2.通过三角函数Math.atan计算角度(滑动范围)。
3.以元素左上角为原点，向右、向下增大,通过初始、结束坐标的X、Y轴位置判断
在X轴上(startX > touchMoveX 向左滑动、touchMoveX > startX 向右滑动)
在Y轴上(startY > touchMoveY 向上滑动、touchMoveY > startY 向下滑动)

废话如下：
WXML
给需要判断滑动方向的元素绑定touchstart、touchend事件

<view class="touchView" bindtouchstart="touchstart" bindtouchend="touchend"></view>

WXSS
给元素加个样式大小背景

.touchView {height: 500rpx;width: 500rpx;margin: 0 auto;background-color: antiquewhite;
}

JS
在js中给data两个值，开始X、Y坐标

data：{startX: 0, //touchStart开始坐标startY: 0,
}

touchstart获取初始坐标

  // 计算滑动角度touchstart(e) {this.setData({startX: e.changedTouches[0].clientX,startY: e.changedTouches[0].clientY})},

通过计算初始坐标、结束坐标的X轴差值、Y轴插值，根据三角函数计算反正切值，返回角度。
(返回的角度是按照正负0° ~ 90°返回，根据象限返回正负第二、第四象限返回正值，第一、第三返回负值)

 //计算滑动角度 start 起点坐标 end 终点坐标angle(start, end) {var _X = end.X - start.X,_Y = end.Y - start.Y;//返回角度 Math.atan()返回数字的反正切值return 360 * Math.atan(_Y / _X) / (2 * Math.PI);},

touchend滑动结束事件处理
通过计算角度函数angle返回的度数，自己可以选择滑动范围的角度，下面为了方便计算没有直接取角度判断，取了角度绝对值，按照绝对值即可在坐标系中找到判断滑动范围的区域

上下滑动

  //滑结束事件处理touchend(e) {let {startX,startY} = this.data;let slidingRange = 45; //let touchMoveX = e.changedTouches[0].clientX;let touchMoveY = e.changedTouches[0].clientY;let angle = this.angle({X: startX,Y: startY}, {X: touchMoveX,Y: touchMoveY});//为了方便计算取绝对值判断if (Math.abs(angle) > slidingRange && touchMoveY < startY) {// 向上滑动};if (Math.abs(angle) > slidingRange && touchMoveY > startY ) {// 向下滑动}}

上面的touchend通过初始位置和结束位置的Y轴坐标大小比较：
touchMoveY > startY：结束Y轴大于初始Y轴（向下滑动）
touchMoveY < startY：结束Y轴小于初始Y轴（向上滑动）
判断上下方向，且向上、向下滑动角度范围分别为45° ~ 135°、225° ~ 315°
调整滑动范围判断只需要调整slidingRange（角度）的大小

如图

左右滑动

如果想判断左右手势的滑动，在touchend事件中加入横向坐标touchMoveX，startX的大小判断

   if (Math.abs(angle) < 45 && touchMoveX < startX) {// 向左滑动};if (Math.abs(angle) < 45 && touchMoveX > startX ) {// 向右滑动}

左右手势的滑动判断通过初始位置和结束位置的X轴坐标大小比较：
touchMoveX > startX：结束X轴大于初始X轴（向右滑动）
touchMoveX < startX：结束X轴小于初始X轴（向左滑动）
判断左右方向、向左、向右滑动角度范围分别在315° ~ 45°、135° ~ 225°
调整滑动范围判断同上只需要调整slidingRange（角度）的大小

如图

以上就是判断向上、向下滑动，向左、向右滑动，如果想在一个元素上同时判断上下左右滑动，只需要计算好角度即可。

第一次写给个面子轻点喷，别骂太狠！

微信小程序判断当前手势滑动方向相关推荐

微信小程序监听手势滑动切换页面
1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bin ...
微信小程序---判断苹果11及以上型号手机
微信小程序-判断苹果11及以上型号手机在app,js全局中 onLaunch: function () {var t = this;wx.getSystemInfo({success: functi ...
微信小程序判断手机机型信息及dpr
微信小程序判断手机机型信息及dpr=2.3 出现这个原因是因为手机dpr不同,导致在显示二维码时出现位置偏移.首先能想到的就是获取设备信息,根据不同机型而解决问题. 1.wxml 开控制位置间距var ...
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿 https://github.com/t5442107/yj_wepy_gesture_lock 用vscode 打开测试! 下载 h ...
微信小程序禁止页面左右滑动
微信小程序禁止页面左右滑动小程序禁止页面左右滑动 PS:在开发过程中可能会遇到某一个页面可以左右滑动,在开发者工具是查看不出来,只有在手机预览才可以看的出来(尝试左或者右滑动). 我的解决方法是在根 ...
微信小程序判断数组是否为空
微信小程序判断数组是否为空 var array = [] if (array.length == 0) { console.log( '数组为空' ) } else {console.log('数组不 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式.而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片.此模式是保证图片长边完整地显示出来, ...
微信小程序开发教程-手势解锁
手势解锁是app上常见的解锁方式,相比输入密码方式操作起来要方便许多.下面展示如何基于微信小程序实现手机解锁.最终实现效果如下图: 整个功能基于canvas实现,首先添加画布组件,并设定样式 < ...

微信小程序判断当前手势滑动方向

微信小程序判断当前手势滑动方向相关推荐

最新文章

热门文章