移动端h5 js手势封装

原文 https://blog.csdn.net/qq_43248623/article/details/115300072
这里对原代码做了一点小小的优化,做了个封装

// 手势封装
const handlerSwiper = (domClass, cb) => {const dom = document.querySelector(domClass)var startx, starty;//获得角度function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.PI;};//根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件function getDirection(startx, starty, endx, endy) {var angx = endx - startx;var angy = endy - starty;var result = 0;//如果滑动距离太短if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {return result;}var angle = getAngle(angx, angy);if (angle >= -135 && angle <= -45) {result = 1;} else if (angle > 45 && angle < 135) {result = 2;} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {result = 3;} else if (angle >= -45 && angle <= 45) {result = 4;}return result;}//手指接触屏幕//  let box = document.querySelector('#box')dom.addEventListener("touchstart", function (e) {startx = e.touches[0].pageX;starty = e.touches[0].pageY;}, false);//手指离开屏幕dom.addEventListener("touchend", function (e) {var endx, endy;endx = e.changedTouches[0].pageX;endy = e.changedTouches[0].pageY;var direction = getDirection(startx, starty, endx, endy);// 0点击  1向上 2向下 3向左 4向右// 各个方向操作逻辑写在回调函数内cb(direction)}, false);
}// 使用方式:
// 0点击  1向上 2向下 3向左 4向右// function doExample(n) {
//     // console.log(n);
//     if (n === 0) {
//         console.log('点击');
//     }
//     if (n === 1) {
//         console.log('向上');
//     }
//     if (n === 2) {
//         console.log('向下');
//     }
//     if (n === 3) {
//         console.log('向左');
//     }
//     if (n === 4) {
//         console.log('向右');
//     }
// }
// handlerSwiper('#box', doExample)export default handlerSwiper

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

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

相关文章

测开面经(pytest测试案例,接口断言,多并发断言)

pytest对用户登录接口进行自动化脚本设计 a. 创建一个名为"test_login.py"的测试文件&#xff0c;编写以下测试脚本 import pytest import requests# 测试用例1&#xff1a;验证登录成功的情况 # 第一个测试用例验证登录成功的情况&#xff0c;发送有效的用户名和密…

戴维贝拉×实在智能丨RPA助力商家线上线下一体化运营,关键指标可随时查看!

戴维贝拉&#xff08;dave&bella&#xff09;创立于2011年&#xff0c;是杭州日冠服饰有限公司旗下婴幼服饰品牌&#xff0c;至今已立足服装业10余年。2012年&#xff0c;戴维贝拉就已经成为电商销售国内前十的品牌。2021年双十一&#xff0c;戴维贝拉再次以傲人的战绩稳居…

如何实现无感刷新(附前后端实现)?

无感刷新的核心思路&#xff1a; 无感刷新机制的目的是在用户不知情的情况下&#xff0c;自动更新其认证令牌&#xff08;通常是Access Token&#xff09;&#xff0c;以保证用户的会话不会中断。这通常涉及到两种类型的令牌&#xff1a; Access Token&#xff1a;它是用户进行…

鲁大师2024年手机Q1季报:骁龙天玑高端博弈,AI已成不可逆的大趋势

其实能够很明显的感觉到&#xff0c;2024年的智能手机Q1市场&#xff0c;恢复了近几年少有的那种激情和热闹&#xff0c;AI的到来&#xff0c;让疲于奔命在性能、影像、系统、生态之外的手机厂商们终于看到了新的发展方向。 当然&#xff0c;作为近几年少有的&#xff0c;真正能…

JAVAEE——文件IO

文章目录 文件的概念什么是文件&#xff1f;树型结构组织 和 目录文件路径相对路径绝对路径 文件的分类文件的权限 文件读写IO API字符流操作API 警告字节流操作APIInputStreamOutputStream 文件的概念 什么是文件&#xff1f; 我们先来理解一下什么是文件&#xff0c;那么想…

软件安全评估之设计评审入门(上)

壹 基础概念 在软件开发生命周期&#xff08;Software Development Life Cycle&#xff0c;简称SDLC&#xff09;中&#xff0c;设计评审&#xff08;Design Review&#xff09;是一个关键的阶段&#xff0c;旨在确保软件设计满足项目需求和目标&#xff0c;并且能够高效、可靠…

动捕算法记录

TDPT_ThreeDPoseTracker 没有开源源代码&#xff0c;开源了推理应用程序 https://digital-standard.booth.pm/items/5294636 Meshcapade Me 每次上传视频时长10秒以内。

01 _ 分布式缘何而起:从单兵,到游击队,到集团军

这里先来聊聊什么是分布式。 与其直接用些抽象、晦涩的技术名词去给分布式下一个定义&#xff0c;还不如从理解分布式的发展驱动因素开始&#xff0c;我们一起去探寻它的本质&#xff0c;自然而然地也就清楚它的定义了。 这里将介绍分布式的起源&#xff0c;是如何从单台计算…

水(CJ/T188)电(DL/T645)抄表数据解析示例

水(CJ/T188)电(DL/T645)抄表数据解析示例 DL/T645 多功能电能表通信协议 和 CJ/T188 水表通讯协议 解析示例 Q/GDW 376.1—2012 主站与采集终端通信协议报文解析示例 国家电网公司企业标准 1. 集中器登录主站注册帧报文 该帧为集中器发送给主站的登录注册帧 登录帧(终端 ->…

聚道云连接器打通红圈CRM和金蝶云星辰,赋能环境科技公司数字化转型

一、客户介绍 某环境科技有限公司是一家专注于环保科技领域的领先企业&#xff0c;致力于为客户提供全方位的环境解决方案。公司拥有一支经验丰富、技术精湛的团队&#xff0c;不断推动环保技术的创新与应用。作为业内的佼佼者&#xff0c;该公司在环境治理、资源回收和节能减…

深度学习理论基础(四)Parser命令行参数模块

学习目录&#xff1a; 深度学习理论基础&#xff08;一&#xff09;Python及Torch基础篇 深度学习理论基础&#xff08;二&#xff09;深度神经网络DNN 深度学习理论基础&#xff08;三&#xff09;封装数据集及手写数字识别 深度学习理论基础&#xff08;四&#xff09;Parse…

Datax,hbase与mysql数据相互同步

参考文章&#xff1a;datax mysql 和hbase的 相互导入 目录 0、软件版本说明 1、hbase数据同步至mysql 1.1、hbase数据 1.2、mysql数据 1.3、json脚本&#xff08;hbase2mysql.json&#xff09; 1.4、同步成功日志 2、mysql数据同步至hbase 1.1、hbase数据 1.2、mysql…

SpringBoot快速入门笔记(5)

文章目录 一、elemetnUI1、main.js2、App.vue3、fontAwesome 一、elemetnUI 开源前端框架&#xff0c;安装 npm i element-ui -S 建议查看官方文档 Element组件&#xff0c;这里是Vue2搭配elementUI&#xff0c;如果是vue3就搭配elementPlus&#xff0c;这里初学就以Vue2为例子…

docker基础学习指令

文章目录 [toc] docker基础常用指令一、docker 基础命令二、docker 镜像命令1. docker images2. docker search3. docker pull4. docker system df5. docker rmi1. Commit 命令 三、 docker 容器命令1. docker run2. docker logs3. docker top4. docker inspect5. docker cp6. …

典型的HyperFLASH读取终端配置寄存器的命令流概述

启动命令&#xff1a; 通常&#xff0c;你需要首先发送一个启动或初始化命令到HyperFLASH设备。这个命令告诉设备你准备进行一系列的操作。 这个命令可能是一个特定的命令码&#xff0c;后跟一些参数&#xff08;如果有的话&#xff09;&#xff0c;这些参数可能包括地址、数据…

合并主分支到子分支

参考&#xff1a;【Git】合并分支出现 Please enter a commit message to explain why this merge is necessary.-CSDN博客 git 如何将主分支(master)合并到子分支上_git 将主分支合并到子分支-CSDN博客 1、先切换到主分支master git checkout master 2、把主分支代码拉到本地…

RankCSE

前置知识复习 https://www.cnblogs.com/Allen-rg/p/13958508.htmlword2vec详解&#xff1a;https://zhuanlan.zhihu.com/p/114538417 Word2Vec和GloVe都是用于将词与向量相关联的流行词嵌入模型。 相同点&#xff1a; 目标&#xff1a;Word2Vec和GloVe的共同目标是将词汇映射…

Windows/Jerry

Jerry Enumeration nmap 扫描系统发现对外开放了 8080 端口&#xff0c;再次使用 nmap 扫描端口详细信息&#xff0c;发现运行着 Apache Tomcat ┌──(kali㉿kali)-[~/vegetable/HTB/Jerry] └─$ nmap -sV -sC -p 8080 -oA nmap 10.10.10.95 -Pn Starting Nmap 7.93 ( htt…

【QT学习】Graphics View框架(进阶篇)- 派生QGraphicsItem类创建自定义图元item

【QT学习】Graphics View框架&#xff08;进阶篇&#xff09;- 派生QGraphicsItem类创建自定义图元item-CSDN博客 前言 本篇&#xff0c;我们将通过对QGraphicsItem类进行派生&#xff0c;创建自定义图元item并显示在窗口中。我们将以创建一张从文件读取的图片item为例进行分…

使用Nodejs + express连接数据库mongodb

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…