uniapp小程序怎么判断滑动的方向

news2024/9/27 23:27:11

项目场景:

获取手机上手指滑动的距离超过一定距离 来操作一些逻辑


解决方案:

在uniapp中,可以通过监听触摸事件来判断滑动的方向。常用的触摸事件包括touchstarttouchmove, 和 touchend。通过这些事件的参数,可以计算出用户的滑动起点和终点,进而判断滑动方向

touchStart 方法记录了触摸开始时的坐标,touchMove 方法在触摸移动时更新了坐标,touchEnd 方法则在触摸结束时计算出滑动的方向。getSwipeDirection 方法用于根据起点和终点的坐标判断出水平或垂直方向的滑动,如果水平方向的位移大于阈值,则判定为水平滑动;如果垂直方向的位移大于阈值,则判定为垂直滑动。

<template>
  <view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <!-- 滑动区域内容 -->
    <view 
        v-for="(item,index) in 20" 
        :key="index" 
        style="border:1rpx solid #ccc;height:100rpx">
        测试11111
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      startX: 0, // 触摸开始的X坐标
      startY: 0, // 触摸开始的Y坐标
      endX: 0,   // 触摸结束的X坐标
      endY: 0,   // 触摸结束的Y坐标
    };
  },
  methods: {
    touchStart(event) {
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
    },
    touchMove(event) {
      // 移动时更新结束坐标
      this.endX = event.touches[0].pageX;
      this.endY = event.touches[0].pageY;
    },
    touchEnd(event) {
      let direction = this.getSwipeDirection(
        this.startX, this.startY, this.endX, this.endY
        );
      console.log('Swipe direction: ' + direction);
    },
    getSwipeDirection(startX, startY, endX, endY) {
      const threshold = 30; // 设定一个阈值,用于判断是否是滑动
      const deltaX = endX - startX;
      const deltaY = endY - startY;
 
      // 如果水平方向的位移大于垂直方向,且水平方向的位移大于阈值,则认为是水平滑动
      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) {
        return deltaX > 0 ? 'right' : 'left';
      }
      // 如果垂直方向的位移大于水平方向,且垂直方向的位移大于阈值,则认为是垂直滑动
      else if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > threshold) {
        return deltaY > 0 ? 'down' : 'up';
      }
      // 其他情况视为无效滑动
      return 'none';
    },
  },
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2088597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java 入门指南:Java NIO —— Selector(选择器)

NIO 的引入 在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多个并发连接时可能会导致性能瓶颈&#xff0c;因为需要为每个连接创建一…

随身wifi靠谱吗?适合哪类人使用?靠谱随身wifi怎么选?热门随身wifi推荐测评!

你真的适合用随身wifi吗&#xff1f; 户外工作者&#xff1a;外卖员&#xff0c;滴滴司机&#xff0c;卡车司机&#xff0c;户外直播等人群对于网络的稳定性和流量的需求还是比较高的。随身wifi便携&#xff0c;信号稳定&#xff0c;流量多性价比高的特点符合户外工作者对网络的…

制造企业看过来!这15款工程软件值得推荐!

本文将盘点15款工程软件&#xff0c;供企业选型参考。 工程软件就如同工程领域的得力助手&#xff0c;能让工程建设的各个环节都变得更加高效、精准。 对于工程企业来说&#xff0c;如果没有合适的工程软件&#xff0c;就像工匠没有趁手的工具&#xff0c;难以打造出精良的作品…

vmware典型安装centos

创建虚拟机 选择centos镜像 设置用户名

Oracle 网络安全产品安全认证检索

自2023年7月1日起&#xff0c;国家网信办、工业和信息化部、公安部、国家认证认可监督管理委员会统一公布和更新网络关键设备和网络安全专用产品清单。列入《网络关键设备和网络安全专用产品目录》的网络安全专用产品应当按照《信息安全技术网络安全专用产品安全技术要求》等相…

日本对COBOL的需求--一篇说清楚

关于COBOL&#xff08;Common Business-Oriented Language&#xff09;在中国和日本的使用情况&#xff0c;确实存在显著的差异。 在中国&#xff0c;COBOL被视为一种较早的编程语言&#xff0c;其使用范围和需求已经相对较小&#xff0c;这主要是由于技术更新和新一代编程语言…

【微信小程序入门】1、初识微信小程序

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

1. 【Java开发手册】| 前言

最早接触 《Java 开发手册》大概是 2020 年的时候&#xff0c;那个时候刚出** 嵩山版 **, 当时也就是大致扫了一遍&#xff0c;对于一些约定其实也不了解&#xff0c;并没有太在意。随着开发经验的积累&#xff0c;从当初埋头写业务的大头兵&#xff0c;到现在成为了一个带领小…

基于vue框架的餐馆管理系统jo0i7(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,菜品分类,菜品信息,餐馆介绍,后厨,菜品订单,后厨接单,完成订单 开题报告内容 基于Vue框架的餐馆管理系统开题报告 一、研究背景与意义 随着餐饮行业的蓬勃发展&#xff0c;餐馆面临着日益激烈的市场竞争和消费者多样化的需求。传…

安泰功率放大器应用领域:MEMS传感器的应用有哪些

功率放大器的应用领域很广泛&#xff0c;从超声测试、材料测试、水声测试再到压电驱动、电磁驱动生物医疗&#xff0c;它都能为整个系统提供强劲的激励&#xff0c;同样功率放大器在MEMS传感器系统的激励中也有着良好应用&#xff0c;今天Aigtek安泰电子就带大家走进MEMS传感器…

Elasticsearch 中,term 查询和 match 查询的区别

文章目录 前言Elasticsearch 中&#xff0c;term 查询和 match 查询的区别1. Term 查询2. Match 查询3. 总结 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都…

Ceruletide 雨蛙素;雨蛙肽;硫酸化蓝肽 简介

目录号 M9316 Ceruletide 雨蛙素&#xff1b;雨蛙肽&#xff1b;硫酸化蓝肽 Ceruletide (Caerulein) 是从澳大利亚青蛙皮肤中分离的生物活性十肽&#xff0c;是一种缩胆囊素受体 (cholecystokinin receptor) 激动剂。此外&#xff0c;Ceruletide还可用于构建小鼠急性胰腺炎模型…

羊大师:防疫不松懈:开学季儿童个人防护小贴士

随着秋风送爽&#xff0c;新学期的脚步悄然而至。为了让孩子们以最佳状态迎接知识的海洋&#xff0c;准备一份全面而实用的学习用品清单显得尤为重要。今天&#xff0c;我们就来一场“开学必备大放送”&#xff0c;帮助家长们轻松备战开学季&#xff01; 文具套装是基础中的基础…

Git —— 2、配置本地与远程免密仓库免密访问、实操创建本地仓库与上github新仓库关联

配置本地与远程仓库免密访问 1、在Git中生成本地密钥&#xff08;指令最后为你github登录账户&#xff09; ssh-keygen -t rsa -C wuyechuangdang163.com 2、将本地生成的"id_rsa.pub"内容拷贝到github网站新创建的ssh密钥中。 3、测试连通 ssh -T gitgithub.com &am…

Xilinx FPGA在线升级——升级思路

一、绪论 网上很多文章都讲述了Xilinx FPGA在线升级即回退的优势&#xff0c;在这里仅简述一遍。优势在于可不拆机的情况下改变FPGA的功能&#xff0c;可进行产品迭代。回退的优势是避免升级过程中一些突发情况导致板卡成为废板。至少Golden里面包含了可进行升级的部分代码。 …

错误提示:vcruntime140.dll丢失怎么办?有哪些办法可以将vcruntime140.dll修复

当你的应用程序突然崩溃或无法启动&#xff0c;并弹出一个含有“vcruntime140.dll缺失”错误提示的对话框时&#xff0c;这意味着你的系统中缺少一个关键的 DLL 文件。这种错误常见于安装了大量第三方软件和游戏的电脑上&#xff0c;尤其是在系统更新或软件卸载后。解决这一问题…

【node.js】基础之修改文件

node.js 基础(一) node.js是什么&#xff1f; 上面这句话的意思就是&#xff1a;Node.js 是一个开源的&#xff0c;跨平台的javascript运行环境。通俗的说就是一个应用程序或者说是一个软件&#xff0c;可以运行javascript。 Node.js的作用&#xff1a; 开发服务器应用。 将数…

移动端视频编辑SDK,智能识别,字幕自动生成

Vlog已成为人们分享生活、表达自我的重要方式&#xff0c;对于众多内容创作者而言&#xff0c;如何在视频中高效、精准地添加字幕&#xff0c;既提升观众体验&#xff0c;又节省宝贵时间&#xff0c;一直是一大挑战。美摄科技&#xff0c;作为视频编辑技术的先驱者&#xff0c;…

你知道吗?这些plm项目管理系统大厂项目经理都在用!

本文将盘点主流的plm项目管理系统&#xff0c;为企业选型提供参考 。 高效的plm项目管理系统是确保工程顺利进行、按时交付以及控制成本的关键&#xff0c;据美国建筑行业研究院的研究数据表明&#xff0c;实施高效项目管理的建筑企业&#xff0c;能够将项目成本降低 5%-10%。我…

【qt】qss使用

1.按钮设置颜色 ui->pushButton->setStyleSheet("QPushButton { color : red;}");也可以通过rgb来设置 ff表示红色拉满&#xff0c;gb为0当然是红色 这只是针对pushbutton对象的控件设置的&#xff0c;如果我想设置所有的按钮空间都是一个颜色 这是通过设置界…