微信小程序实现手势滑动

最新推荐文章于 2025-07-08 11:27:21 发布

小沐沐吖

最新推荐文章于 2025-07-08 11:27:21 发布

阅读量552

点赞数 7

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/mu1804784474/article/details/139350366

1、实现思路

变量解释：

startY(开始 Y 坐标)、startX(开始 X 坐标)
touchMoveY（结束 Y 坐标）、touchMoveX（结束 X 坐标）

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

2、实现代码

touch.js

/**
 * 左右 or 上下 角度分隔值
 * 小于 45 左右滑动
 * 大于 45 上下滑动
 */
const slidingRange = 45;

/**
 * 起始坐标
 */
let startCoord = {
   
   
  x: 0,
  y: 0,
};

/**
 * 设置起始坐标
 * @param {Object} coord
 * @param {Number} coord.x
 * @param {Number} coord.y
 */
export function setStartCoord(coord) {
   
   
  startCoord.x = coord.x;
  startCoord.y = coord.y;
}

/**
 * 计算滑动角度
 * @param {Object} endCoord
 * @param {Number} endCoord.x
 * @param {Number} endCoord.y
 * @returns
 */
function _calculateAngle(endCoord) {
   
   
  const _X = endCoord.x - startCoord.x,
    _Y = endCoord.y - startCoord.y