vue检测页面手指滑动距离,执行回调函数,使用混入的语法,多个组件都可以使用

mixin.ts
定义滑动距离的变量和检测触摸开始的方法,滑动方法,并导出两个方法
sendTranslateX.value > 250 && sendTranslateY.value < -100是向上滑动,满足距离后执行回调函数func,并在一秒内不再触发,一秒后清空距离并允许再次触发。

// touch----mixins
import { ref } from "vue";
import { useRouter } from "vue-router";
const userEntityMixin = {setup() {const router = useRouter();let sendTranslateX = ref(0);let sendTranslateY = ref(0);let sendoriginX = 0;let sendoriginY = 0;const sendTouchStart = event => {sendoriginX = event.touches[0].screenX;sendoriginY = event.touches[0].screenY;};let jumpOnce = false;const sendTouchMoveEvent = (e, func) => {if (sendTranslateX.value > 250 && sendTranslateY.value < -100) {if (jumpOnce) {setTimeout(() => {jumpOnce = false;sendTranslateX.value = 0;sendTranslateY.value = 0;}, 1000);return;}// jumpToPage();func && func();jumpOnce = true;return;}let afterX = 0;let afterY = 0;afterX = e.changedTouches[0].screenX;afterY = e.changedTouches[0].screenY;sendTranslateX.value = afterX - sendoriginX;sendTranslateY.value = afterY - sendoriginY;};return {sendTouchStart,sendTouchMoveEvent};}
};
export default userEntityMixin;

使用混入的检测滑动,增加最外层标签的监听

<divclass="customer"@touchstart="sendTouchStart"@touchmove="sendTouchMoveEvent($event, jumpToPage)">
import userEntityMixin from "@/mixins/pageTouches.ts";
const { sendTouchStart, sendTouchMoveEvent } = userEntityMixin.setup();
const jumpToPage = () =>{console.log("回调函数");
}

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

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

相关文章

【重走编程路】设计模式概述(七) -- 外观模式、组合模式、享元模式

文章目录 前言10. 外观模式&#xff08;Facade&#xff09;定义解决方案为什么使用外观模式应用场景优缺点 11. 组合模式&#xff08;Composite&#xff09;定义解决方案应用场景优缺点 12. 享元模式&#xff08;Flyweight&#xff09;定义解决方案应用场景优缺点 前言 结构型…

【Python百日进阶-Web开发-音频】Day702 - librosa安装及模块一览表

文章目录 一、Librosa简介与安装1.1 Librosa是什么1.2 Librosa官网 二、Librosa安装2.1 安装Librosa 三、安装ffmpeg3.1 ffmpeg官网下载3.2 ffmpeg安装3.2.1 解压3.2.2 添加环境变量3.2.3 测试ffmpeg是否安装成功 四、Librosa 库模块一览4.1 库函数结构4.2 Audio processing&am…

C++相关概念和易错语法(21)(虚函数、协变、析构函数的重写)

多态的核心是虚函数&#xff0c;本文从虚函数出发&#xff0c;根据原理慢慢推进得到结论&#xff0c;进而理解多态 1.虚函数 先看一下下面的代码&#xff0c;想想什么导致了这个结果 #include <iostream> using namespace std;class A { public:virtual void test(){co…

x264 编码过程中视频相关数据流转分析

介绍 x264编码器的编码过程是一个复杂且多阶段的流程,涉及多个步骤,每个步骤都对视频数据进行特定的处理。以下是x264编码过程的一般数据流和关键步骤的分析: 输入帧处理: 输入原始视频帧到编码器。帧可能首先被转换到内部颜色空间(如YUV420P)。分析与预处理: 进行宏块级…

元服务体验-服务发现

服务发现&#xff0c;无论线上或线下的方式都可以发现元服务。 线上&#xff1a;基于用户意图。从精准意图的搜索、用户事件触发的推荐到主动探索等场景。用户可以在设备的负一屏、全局搜索、应用市场、桌面等场景发现元服务。 线下&#xff1a;用户在 HarmonyOS Connect标签…

华为HCIP Datacom H12-821 卷39

1.填空题 请2001 :0DB8:0000:C030:0000: 000: 09A0:CDEF地址进行压缩。() (若答案中存在字母&#xff0c;请采用大写格式) 参考答案&#xff1a;2001 :DB8:0:C030: :9A0:CDEF 解析&#xff1a; IPv6地址的表示方法 IPv6地址总长度为128比特&#xff0c;通常分为8组&#xff0c…

LeetCode 20.有效的括号 C写法

LeetCode 20.有效的括号 C写法 思路&#x1f9d0;&#xff1a; ​ 这题最优思路是用栈来进行匹配&#xff0c;如果是左括号就入栈&#xff0c;如果是右括号那么左括号就出栈去匹配&#xff0c;匹配成功就继续入栈或者出栈&#xff0c;匹配失败则字符串无效。不过C语言没有STL…

win10远程ubuntu服务器桌面且显示图像窗口工具及配置说明

仅需一个MobaXterm_Personal工具就可以实现 网上的教程比较多&#xff0c;实现起来比较复杂&#xff0c;这个是经过自己的钻研找到的方法&#xff08;请勿转载和抄袭&#xff09; 报错&#xff1a;cannot connect to X server :0.0 操作1&#xff1a;export DISPLAY自己windo…

python 语法学习(总结类) day 3

一、数据类型 1 整数类型 int 2 浮点数类型 float 3 复数类型 二、字符串类型 1 字符串类型 2 字节串类型&#xff08;很少用到&#xff09; 三、组合类型 1 集合类型&#xff1a;一维数组的集合 2 元组…

PHP基础认知

PHP&#xff08;Hypertext Preprocessor&#xff0c;即“超文本预处理器”&#xff09;是一种广泛使用的开源通用脚本语言&#xff0c;特别适合用于Web开发。其基础语法涵盖了多个方面&#xff0c;包括标记与注释、数据类型、变量、运算符、控制结构等。以下是PHP基础语法的详细…

【网络安全】资产记录工具 Hacker Asset Logger 安装使用详细教程

原创文章,不得转载。 文章目录 工具介绍安装地址使用方式工具介绍 在对某一应用程序的多个页面、对多个相关联的应用程序进行渗透测试的过程中,多个请求包的参数、功能之间可能存在一定的联系。 例如,在A页面触发的请求包中,通过UID可获取CustomerID;在B页面触发的请求包…

SSE、Webworker 、webSocket、Http、Socket 服务器推送技术

Http协议 受浏览器的同源策略限制 HTTP 协议是一种无状态的、无连接&#xff08;短暂连接&#xff0c;客户端发送请求&#xff0c;服务器响应后即断开连接&#xff09;的、单向的应用层协议。 它采用了请求/响应模型。通信请求只能由客户端发起&#xff0c;服务端对请求做出应…

浅谈网络安全防守:从被动应对到主动管理的转变

浅谈网络安全防守&#xff1a;从被动应对到主动管理的转变 背景&#xff1a; 在当今的数字时代&#xff0c;网络安全已成为企业生存和发展的重要基石。然而&#xff0c;当企业的网络安全体系面临着诸如资产不清、互联网应用管理混乱、边界防火墙策略失效、长期未修复的漏洞、…

IP地址与物理地址:网络通信的基础详解

在学习网络通信时&#xff0c;理解IP地址与物理地址&#xff08;也称为硬件地址&#xff09;的区别至关重要。这篇文章将为你解答这些基本概念&#xff0c;并帮助你更好地掌握网络通信的基础。 什么是IP地址和物理地址&#xff1f; IP地址是网络层的逻辑地址&#xff0c;用于标…

leetcode算法题(反转链表)

思路1&#xff1a; 创建新的链表&#xff0c;遍历原链表&#xff0c;将原链表的节点进行头插到新链表中。 struct ListNode* reverseList(struct ListNode* head) {struct ListNode* next NULL;struct ListNode* new_head NULL;if (head NULL ||head->next NULL) // 空…

Java8 根据List实体中一个字段去重取最大值,并且根据该字段进行排序

1、前言 某个功能要求需要对一个list对象里数据按照股票分组&#xff0c;并且取分组涨跌幅最大的&#xff0c;返回一个新的list对象&#xff0c;并且按照涨跌幅字段进行排序&#xff0c;这么一连串的要求&#xff0c;如果按照传统的写法&#xff0c;我们需要写一大坨的代码&am…

AWS云计算实战:电商平台发卡机器人开发指南

在当今数字化时代&#xff0c;电商平台的自动化运营变得尤为重要。本文将深入探讨如何利用AWS云计算平台开发一款高效的发卡机器人&#xff0c;旨在提高电商平台的自动化水平和用户体验。 关键词 AWS云计算, 电商平台, 发卡机器人 1. 引言 随着电商行业的蓬勃发展&#xff…

Python 获取今天(当天)、昨天(前一天)、前天(昨天的前一天)的开始时间、结束时间

描述&#xff1a;我这里是封装成DatetimeHelper工具类来调用 1.今天(当天)开始时间、结束时间 from datetime import datetime, timedeltaclass DatetimeHelper:# 获取今天(当天)的开始时间、结束时间(datetime类型)staticmethoddef getTodayStartEnd():# 获取当前的日期now …

编织微服务网络:在Eureka中打造分布式服务网格

编织微服务网络&#xff1a;在Eureka中打造分布式服务网格 在微服务架构的复杂网络中&#xff0c;服务间的通信和管理变得愈加复杂。服务网格&#xff08;Service Mesh&#xff09;作为一种微服务间通信的基础设施层&#xff0c;负责处理服务发现、负载均衡、故障恢复等任务。…

在 electron+vite+vue3+express 项目中使用better-sqlite3

文章目录 一、安装 electron-rebuild 和 better-sqlite3二、使用 electron-rebuild 重建 Node.js 模块三、better-sqlite3 的基本使用四、打包五、参考资料 一、安装 electron-rebuild 和 better-sqlite3 yarn add -D electron-rebuild yarn add better-sqlite3Electron 内置的…