【微信小程序】滑动手势处理

最新推荐文章于 2024-05-31 23:10:39 发布
最新推荐文章于 2024-05-31 23:10:39 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： Taro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/waillyer/article/details/119738872
版权

1.当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；
当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

思路：用touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。

2.然而在实际的操作中，手指的上下滑动很难做到直上直下，只要稍微有点斜，只要稍微有点斜，就会被X轴的判断先行接管，而与我们实际的操作意愿相背离。
解决方案：
通过角度判断：以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。
同时加入时间差，在一定时间内触发滑动

3.使用Math.atan2来计算起点与终点形成的直线角度。

注意：标准坐标系与屏幕坐标系并不相同，在屏幕坐标系中，上半轴为负值，要实现转换，只需要调换Y坐标起点与终于位置即可。

4.位置限制
手指从左右红框开始按照一定时间，一定距离，一定角度滑动，会触发响应事件
中间部分即便会存在以上情况，都不响应
在这里插入图片描述

import React, { useState } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';

const PageTouch = ({ children, handlePreviousPage, handleNextPage, pre_id, next_id }) => {
    const [touchStart, setTouchStart] = useState([0, 0]);
    const [touchEnd, setTouchEnd] = useState([0, 0]);
    const [startTime, setStartTime] = useState(0);
    const handleTouchStart = e => {
        const sx = e.touches[0].pageX;
        const sy = e.touches[0].pageY;
        setTouchStart([sx, sy]);
        setStartTime(new Date().getTime()); // 获取毫秒数
    };
    const handleTouchMove = e => {
        const sx = e.touches[0].pageX;
        const sy = e.touches[0].pageY;
        setTouchEnd([sx, sy]);
    };
    // 返回角度

    function GetSlideAngle(dx, dy) {
        return (Math.atan2(dy, dx) * 180) / Math.PI;
    }

    // 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动

    function GetSlideDirection(startX, startY, endX, endY) {
        const dy = startY - endY;

        const dx = endX - startX;

        let result = 'static';
        let name = '未滑动';

        // 如果滑动距离太短

        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
            return result;
        }

        const angle = GetSlideAngle(dx, dy);

        if (angle >= -20 && angle < 45) {
            result = 'right';
            name = '向右';
        } else if (angle >= 45 && angle < 135) {
            result = 'up';
            name = '向上';
        } else if (angle >= -135 && angle < -45) {
            result = 'down';
            name = '向下';
        } else if ((angle >= 150 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 'left';
            name = '向左';
        }

        return {
            AngleStatus: result,
            angle,
            name,
        };
    }

    const handleTouchEnd = () => {
        const strX = touchStart[0];
        const endX = touchEnd[0];
        const strY = touchStart[1];
        const endY = touchEnd[1];
        const { AngleStatus, angle, name } = GetSlideDirection(strX, strY, endX, endY);
        console.log('滑动角度:', `${(angle, name)}`);
        const X = strX - endX;
        const Y = endY - strY;
        const absY = Math.abs(endY - strY);
        const absX = Math.abs(strX - endX);
        const minTime = 110; // 最小时间，单位：毫秒，低于这个值不响应滑动处理
        const scrollHeightRight = 30; // Y轴滑动距离
        const scrollHeightLeft = 30; // Y轴滑动距离
        const touchTime = new Date().getTime() - startTime; // 计算滑动时间
        const alowchngePage = touchTime >= minTime && absX > 50;
        const log = `strX:${strX},endX:${endX}，偏移x：${absX}`;

        if (
            absX > 90 &&
            X < 0 &&
            AngleStatus === 'right' &&
            touchTime >= minTime &&
            absY < scrollHeightRight &&
            strX < 100
        ) {
            console.log('向右');
            Taro.showToast({
                title: `右滑，${log}`,
                icon: 'none',
            });
            //   if (!pre_id) {
            //       return Taro.showToast({
            //           title: '已经是第一页',
            //           icon: 'none',
            //       });
            //   }
            //   handlePreviousPage();
        } else if (
            absX > 30 &&
            X > 0 &&
            AngleStatus === 'left' &&
            touchTime >= minTime &&
            absY < scrollHeightLeft &&
            strX > 300
        ) {
            console.log('向左');
            Taro.showToast({
                title: `左滑，${log}`,
                icon: 'none',
            });
            //  if (!next_id) {
            //      return Taro.showToast({
            //          title: '已经是最后一页',
            //          icon: 'none',
            //      });
            //  }
            //  handleNextPage();
        } else if (absY > 50 && Y > 0 && AngleStatus === 'down') {
            console.log('向下');
            Taro.showToast({
                title: `向下，${log}`,
                icon: 'none',
            });
        } else if (absY > 50 && Y < 0 && AngleStatus === 'up') {
            console.log('向上');
            Taro.showToast({
                title: `向上，${log}`,
                icon: 'none',
            });
        } else {
            console.log('没滑动');
            Taro.showToast({
                title: `没滑动，${log}`,
                icon: 'none',
            });
        }

        setTouchStart([0, 0]);
        setTouchEnd([0, 0]);
    };
    return (
        <View
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}
        >
            {children}
        </View>
    );
};

export default PageTouch;

增加动画

import React, { useState } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
// 返回角度

function GetSlideAngle(dx, dy) {
    return (Math.atan2(dy, dx) * 180) / Math.PI;
}

// 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动

function GetSlideDirection(startX, startY, endX, endY) {
    const dy = startY - endY;

    const dx = endX - startX;

    let result = 'static';
    let name = '未滑动';

    // 如果滑动距离太短

    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
        return result;
    }

    const angle = GetSlideAngle(dx, dy);

    if (angle >= -20 && angle < 45) {
        result = 'right';
        name = '向右';
    } else if (angle >= 45 && angle < 135) {
        result = 'up';
        name = '向上';
    } else if (angle >= -135 && angle < -45) {
        result = 'down';
        name = '向下';
    } else if ((angle >= 150 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 'left';
        name = '向左';
    }

    return {
        AngleStatus: result,
        angle,
        name,
    };
}
const PageTouch = ({ children, handlePreviousPage, handleNextPage, pre_id, next_id }) => {
    const [touchStart, setTouchStart] = useState([0, 0]);
    const [touchEnd, setTouchEnd] = useState([0, 0]);
    const [startTime, setStartTime] = useState(0);
    const [aniRight, setAniRight] = useState('');
    const [aniLeft, setAniLeft] = useState('');
    const [aniT, setAniT] = useState(false);
    // 向右滑动操作
    const moveAniRight = () => {
        setAniT(false);
        const animation = Taro.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
            delay: 100,
        });
        animation
            .opacity(0.2)
            .translate(500, 0)
            .step();
        setAniRight(animation.export());
        setTimeout(() => {
            setAniRight('');
        }, 800);
    };
    // 向左滑动操作
    const moveAniLeft = () => {
        setAniT(true);
        const animation = Taro.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
            delay: 100,
        });
        animation
            .opacity(0.2)
            .translate(-500, 0)
            .step();
        setAniLeft(animation.export());
        setTimeout(() => {
            setAniLeft('');
        }, 800);
    };
    const handleChangePage = (strX, strY, endX, endY, ifMove) => {
        const { AngleStatus } = GetSlideDirection(strX, strY, endX, endY);
        const X = strX - endX;
        const Y = endY - strY;
        const absY = Math.abs(endY - strY);
        const absX = Math.abs(strX - endX);
        const minTime = 110; // 最小时间，单位：毫秒，低于这个值不响应滑动处理
        const scrollHeightRight = 30; // Y轴滑动距离
        const scrollHeightLeft = 30; // Y轴滑动距离
        const touchTime = new Date().getTime() - startTime; // 计算滑动时间
        // const alowchngePage = touchTime >= minTime && absX > 50;
        // const log = `角度:${angle},x偏移：${absX},时间：${touchTime}`;

        if (
            absX >= 50 &&
            X < 0 &&
            AngleStatus === 'right' &&
            touchTime >= minTime &&
            absY < scrollHeightRight &&
            strX < 100
        ) {
            // Taro.showToast({
            //     title: `右滑，${log}`,
            //     icon: 'none',
            // });
            if (!pre_id) {
                return Taro.showToast({
                    title: '已经是第一页',
                    icon: 'none',
                });
            }
            if (ifMove) {
                moveAniRight();
            } else {
                handlePreviousPage();
            }
        } else if (
            absX > 40 &&
            X > 0 &&
            AngleStatus === 'left' &&
            touchTime >= minTime &&
            absY < scrollHeightLeft &&
            strX > 300
        ) {
            // Taro.showToast({
            //     title: `左滑，${log}`,
            //     icon: 'none',
            // });
            if (!next_id) {
                return Taro.showToast({
                    title: '已经是最后一页',
                    icon: 'none',
                });
            }
            if (ifMove) {
                moveAniLeft();
            } else {
                handleNextPage();
            }
        } else if (absY > 50 && Y > 0 && AngleStatus === 'down') {
            // Taro.showToast({
            //     title: `向下，${log}`,
            //     icon: 'none',
            // });
        } else if (absY > 50 && Y < 0 && AngleStatus === 'up') {
            // Taro.showToast({
            //     title: `向上，${log}`,
            //     icon: 'none',
            // });
        } else {
            // Taro.showToast({
            //     title: `没滑动，${log}`,
            //     icon: 'none',
            // });
        }
    };
    const handleTouchStart = e => {
        const sx = e.touches[0].pageX;
        const sy = e.touches[0].pageY;
        setTouchStart([sx, sy]);
        setStartTime(new Date().getTime()); // 获取毫秒数
    };
    const handleTouchMove = e => {
        const endX = e.touches[0].pageX;
        const endY = e.touches[0].pageY;
        setTouchEnd([endX, endY]);
        const strX = touchStart[0];
        const strY = touchStart[1];
        handleChangePage(strX, strY, endX, endY, true);
    };

    const handleTouchEnd = () => {
        const strX = touchStart[0];
        const endX = touchEnd[0];
        const strY = touchStart[1];
        const endY = touchEnd[1];
        handleChangePage(strX, strY, endX, endY, false);
        setTouchStart([0, 0]);
        setTouchEnd([0, 0]);
    };
    return (
        <View
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}
            animation={aniT ? aniLeft : aniRight}
        >
            {children}
        </View>
    );
};

export default PageTouch;
微信小程序开发中的触摸手势和页面缩放
m0_75244442的博客
07-06 645
在微信小程序中，可以通过 wx.onTouchStart、wx.onTouchMove、wx.onTouchEnd 等方法来监听触摸事件，并通过 event 对象获取触摸点的坐标等信息。二、页面缩放内容 在微信小程序中，可以通过两种方式来实现页面内容的缩放效果：使用 transform 属性和使用 scroll-view 组件。当使用两指进行缩放操作时，scroll-view 组件会触发缩放事件，通过 event.detail.scale 可以获取实时的缩放比例。
微信小程序手势库和手势组件，小程序手势操作mini-program-master.zip
09-25
微信小程序手势库和手势组件，小程序手势操作mini-program-master.zip
微信小程序实现手势滑动
Sunny_boy
05-31 478
touchMoveY（结束 Y 坐标）、touchMoveX（结束 X 坐标）startY(开始 Y 坐标)、startX(开始 X 坐标)
微信小程序开发-滑动操作
weixin_34319640的博客
03-26 175
在实际应用中，当某种手势被触发后，在用户没有放开鼠标或手指前，会一直识别为该手势。比如当用户触发左滑手势后，这时再向下滑动，仍要按照左滑手势来处理。 可以定义一个标记来记录第一次识别到的手势，如果已识别出手势，后续的滑动操作就可以忽略，直到用户放开鼠标或手指。放开鼠标或手指操作可以通过绑定handletouchend事件来处理。 Page({ data: { lastX:...
微信小程序手势滑动
weixin_43778705的博客
08-01 1060
微信小程序手势滑动
微信小程序实现手势滑动卡片效果
10-16
主要为大家详细介绍了微信小程序实现手势滑动卡片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 监听手势滑动切换页面实例详解
12-29
微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始、滑动、结束的监听： <view class=touch bindtouchstart=touchStart bindtouchmove=touchMove bindtouchend=touchEnd></view> 2.js: var ...
微信小程序实现手势滑动效果
12-29
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下 wxml: bindtouchmove touchMove bindtouchend=touchEnd> index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0...
微信小程序滑动解锁手势解锁源代码
09-10
微信小程序滑动解锁是一种常见的用户交互方式，常用于提高应用的安全性和用户体验。在这个项目中，开发者分享了模仿滑动解锁功能的源代码，方便其他开发者学习和研究。下面将详细介绍这个微信小程序滑动解锁实现的...
微信小程序手势操作拓展插件，包括拖拽、旋转、缩放等wx-touch-master.zip
09-25
微信小程序手势操作拓展插件，包括拖拽、旋转、缩放等wx-touch-master.zip
微信小程序-微信小程序 手势事件
08-05
WxTouchEvent 微信小程序手势事件库 由于微信小程序只能够支持 tap,longtap,touchstart,touchmove,touchcancel,touchend时间，对于比较复杂的事件只能自己实现 因此自己对 alloyFinger库进行了改造，开发了时候微信小程序手势事件库WxTouchEvent,使用 ES 6进行编写,手势库支持以下事件 touchStart touchMove touchEnd touchCancel multipointStart multipointEnd tap doubleTap longTap singleTap rotate pinch pressMove swipe 使用 由于和微信小程序强绑定，因此需要在元素上面绑定好所有的事件，书写比较麻烦，因此建议对于原生支持的使用原生去解决， 只有当需要 pinch，rotate,swipe 等特殊事件才使用这个事件库实现 > 安装 npm i wx-touch-event --save , 或者直接从 git 库 checkout 出来 绑定方法 *.wxml 在wxml中对需要
小程序更多的手势事件（左右滑动、放大缩小、双击、长按）
weixin_53068161的博客
07-16 7328
微信小程序提供的原生事件有触摸开始（bindtouchstart）、移动触摸点（bindtouchmove）、触摸结束（bindtouchend）以及长按事件（bindlongtap）和单击事件（bindtap）。通过以上原生事件可设计制作衍生出更多的手势事件；文章记录小程序中组件“左右滑动、放大缩小、双击”事件的配置；...
【前端与后端的桥梁】——信息化人员必备知识&面试宝典：SQL优化实战手册
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-31 1199
SQL优化是一门艺术，也是科学，需要不断实践与学习。作为前端开发者，理解SQL优化不仅能促进与后端团队的高效沟通，更能从数据层面提升前端应用的性能。在日常开发中，记得关注查询性能、利用索引、避免全表扫描，并时刻警惕SQL注入的风险。引发讨论：在你的项目中，遇到过哪些SQL优化的难题？或是有哪些独到的优化技巧愿意与大家分享？欢迎在评论区留言，我们一起探讨，共同进步！欢迎来到我的博客，很高兴能够在这里和您见面！
了解过微信小程序手势滑动吗？
热门推荐
主要领域：前端开发
08-07 1万+
wxml: <view class="duration-touch-view" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > </view> index.js: var touchStartX = 0;//触摸时的原点 var touchStart...
微信小程序开发中的手势识别和触摸事件处理
qq_67153941的博客
05-06 698
微信小程序开发中的手势识别和触摸事件处理是非常重要的内容。在本篇文章中，我将为您详细介绍手势识别和触摸事件处理的相关知识，并提供代码案例进行演示。希望本文能够对您理解和掌握微信小程序中的手势识别和触摸事件处理有所帮助。
微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）
weixin_44714325的博客
01-26 4797
touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 拖拽操作案例1：（注意按钮拖出屏幕边缘处理） <view id="id" bindtouchmove="handletouchmove" class=‘demo‘ style=‘top:{{ballTop}}px; left: {{ballLeft}}px‘></view> page
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值