(注:文字可能有点多可以直接复制代码到开发者工具上预览)
功能描述:文章适用于微信小程序根据滑动手势方向进行不同操作
主要点: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(角度)的大小
如图
以上就是判断向上、向下滑动,向左、向右滑动,如果想在一个元素上同时判断上下左右滑动,只需要计算好角度即可。