uniapp开发vue3监听右滑返回操作,返回到指定页面

想要在uniapp框架中监听左滑或者右滑手势,需要使用touchstart和touchend两个api,因为没有原生的左右滑监听api,所以我们只能依靠这两个api来获取滑动开始时候的x坐标和滑动结束后的x坐标做比对,右滑的话,结束时候的x坐标-开始的x坐标肯定是大于一定阈值的,比如大于50,我们就算它右滑了。

给元素绑定滑动事件:

监听滑动距离:

当滑动距离大于50,说明是右滑返回操作:处理自定义返回操作backHandle。

完成的代码:

    <viewclass="orderDetail":style="{ paddingTop: contentTop }"@touchstart="touchStart"@touchend="touchEnd">。。。</view>// 监听滑动距离// move xlet startX = 0// 监听手势右滑事件
const touchStart = (event) => {console.log('touchStart', event)startX = event.touches[0].clientX
}const touchEnd = (event) => {console.log('touchEnd', event)const endX = event.changedTouches[0].clientXconsole.log('move x :', endX)if (endX - startX > 50) {// 说明是右滑返回了,自定义滑动事件backHandle()}
}

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

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

相关文章

飞速提升中文打字,Master of Typing in Chinese for Mac助你一臂之力

Master of Typing in Chinese for Mac是一款专为Mac用户设计的中文打字练习软件。其主要功能包括帮助用户提高打字速度和准确性&#xff0c;培养盲打技巧&#xff0c;使键盘输入更加高效。 打字速度提升&#xff1a;软件提供多种练习模式&#xff0c;如字母、特殊字符、单词和…

FPGA状态机设计详解

一.什么是状态机&#xff1f; 想象一下你正在玩一个电子游戏&#xff0c;角色有多种状态&#xff0c;比如“行走”、“跳跃”、“攻击”等。每当你按下不同的按键或者满足某些条件时&#xff0c;角色的状态就会改变&#xff0c;并执行与该状态对应的动作。这就是状态机的一个简…

Java 类加载和实例化对象的过程

1. 类加载实例化过程 当我们编写完一个*.java类后。编译器&#xff08;如javac&#xff09;会将其转化为字节码。转化的字节码存储在.class后缀的文件中&#xff08;.class 二进制文件&#xff09;。接下来在类的加载过程中虚拟机JVM利用ClassLoader读取该.class文件将其中的字…

GAW-1000D 微机控制钢绞线拉力试验机

一、整机外观图与示意图 外观示意图 性能说明&#xff1a; GAW-1000D型微机控制电液伺服钢绞线拉力试验机主要用于对预应力钢绞线进行抗拉强度测试。由宽调速范围的电液比例伺服阀与计算机及测控单元所组成伺服控制系统&#xff0c;能精确的控制和测量试验全过程。整机由主机…

Unity3D雨雪粒子特效(Particle System)

系列文章目录 unity工具 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、下雨的特效1-1.首先就是创建一个自带的粒子系统,整几张贴图,设置一下就能实现想要的效果了1-2 接着往下看视频效果 &#x1f449;二、下雪的特效&#x1f449;三、下雪有积雪的效果3-1 先把控…

docxtemplater避坑!!! 前端导出word怎么插入本地图片或base64 有完整示例

用docxtemplater库实现前端通过模板导出word&#xff0c;遇到需求&#xff0c;要插图片并转成word并导出&#xff0c;在图片转换这块遇到了问题&#xff0c;网上查示例大多都跑不通&#xff0c;自己琢磨半天&#xff0c;总算搞明白了。 附上清晰完整示例&#xff0c;供参考。 …

SpringCloudAlibaba:6.2RocketMQ的普通消息的使用

简介 普通消息也叫并发消息&#xff0c;是发送效率最高&#xff0c;使用最多的一种 依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSch…

kafka生产者相关

kafka生产者相关 目录概述需求&#xff1a; 设计思路实现思路分析1.kafka 生产者分区策略2.kafka 生产者ISR3.生产者ACK机制4.生产者数据一致性问题5.kafka ExactlyOnce 问题 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfec…

vue的图片上传

关于vue3的图片上传&#xff0c;这里记录一下&#xff0c;有兴趣的朋友可以参考。。。。 <van-uploader:after-read"afterRead"v-model"headImg":max-count"1"class"picture"/> const fileList ref();const afterRead (fil…

【强化学习的数学原理-赵世钰】课程笔记(三)贝尔曼最优公式

目录 学习引用内容梗概1. 第三章主要有两个内容2. 第二章大纲 二.激励性实例&#xff08;Motivating examples&#xff09;三.最优策略&#xff08;optimal policy&#xff09;的定义四.贝尔曼最优公式&#xff08;BOE&#xff09;&#xff1a;简介五.贝尔曼最优公式&#xff0…

Effective C++(3)

3.资源管理 条款13&#xff1a;以对象管理资源 以对象管理资源对于传统的堆资源管理&#xff0c;我们需要使用成对的new和delete&#xff0c;这样若忘记delete就会造成内存泄露。因此&#xff0c;我们应尽可能以对象管理资源&#xff0c;并采用RAII&#xff08;Resource Acqu…

​银发经济:老龄化社会中的机遇与挑战

在21世纪&#xff0c;全球人口结构正经历着前所未有的变化&#xff0c;特别是老龄化现象逐渐凸显。这一趋势不仅对社会结构、经济发展产生深远影响&#xff0c;同时也催生了一个新的经济增长点——银发经济。所谓的银发经济&#xff0c;是指以满足老年人需求为主要目标的经济活…

专为汽车内容打造的智能剪辑解决方案

汽车内容创作已成为越来越多车主和汽车爱好者热衷的活动。然而&#xff0c;如何高效、便捷地将行车途中的精彩瞬间转化为高质量的视频作品&#xff0c;一直是困扰着广大用户的一大难题。美摄科技凭借其深厚的视频处理技术和智能分析能力&#xff0c;推出了专为汽车内容记录而生…

CF556B Case of Fake Numbers 题解

题目传送门 解题思路&#xff1a; 对于齿轮的转动&#xff0c;我们只需要考虑第 1 1 1 个齿轮的向右的转动次数&#xff0c;以此使后面的齿轮也一起转动&#xff0c;然后去考虑后面的齿轮是否处在正确的位置即可。 特别注意&#xff1a; 奇数齿轮与偶数齿轮的方向是不同的。…

C语言数据结构栈的概念及结构、栈的实现、栈的初始化、销毁栈、入栈、出栈、检查是否为空、获取栈顶元素、获取有效元素个数等的介绍

文章目录 前言栈的概念及结构栈的实现一、 栈结构创建二、 初始化结构三、销毁栈四、入栈五、出栈六、检查是否为空七、获取栈顶元素八、获取有效元素的个数九、测试 1十、测试 2总结 前言 C语言数据结构栈的概念及结构、栈的实现、栈的初始化、销毁栈、入栈、出栈、检查是否为…

意外发现openGauss兼容Oracle的几个条件表达式

意外发现openGauss兼容Oracle的几个条件表达式 最近工作中发现openGauss在兼容oracle模式下&#xff0c;可以兼容常用的两个表达式&#xff0c;因此就随手测试了一下。 查看数据库版本 [ommopenGauss ~]$ gsql -r gsql ((openGauss 6.0.0-RC1 build ed7f8e37) compiled at 2…

数据结构----堆的实现(附代码)

当大家看了鄙人的上一篇博客栈后&#xff0c;稍微猜一下应该知道鄙人下一篇想写的博客就是堆了吧。毕竟堆栈在C语言中常常是一起出现的。那么堆是什么&#xff0c;是如何实现的嘞。接下来我就带大家去尝试实现一下堆。 堆的含义 首先我们要写出一个堆&#xff0c;那么我们就需…

kubernetes之prometheus kube-controller-manager。 scheduler报错问题

项目场景&#xff1a; prometheus scheduler及kube-controller-manager监控报错 问题描述 kubeadm搭建完kube-prometheus 会有这个报错 原因分析&#xff1a; rootmaster2:~# kubectl describe servicemonitor -n kube-system kube-controller-manager通过以上图片我们发现 k…

php TP8 阿里云短信服务SDKV 2.0

安装&#xff1a;composer require alibabacloud/dysmsapi-20170525 2.0.24 官方文档&#xff1a;短信服务_SDK中心-阿里云OpenAPI开发者门户 (aliyun.com) 特别注意&#xff1a;传入参数获得值形式 正确&#xff1a; $PhoneNumbers $postData[PhoneNumbers];$signName $po…

React Native 之 动画Animated(十一)

react-native 的 Animated API提供了一种声明式的方式来创建平滑的动画效果。它允许你编写动画逻辑&#xff0c;并将动画值直接绑定到组件的样式或布局属性上。 react-native 的 Animated 库通过以下方式工作&#xff1a; 创建动画值&#xff1a;首先&#xff0c;你需要使用 A…