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

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

给元素绑定滑动事件:

监听滑动距离:

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

完成的代码:

    <view
        class="orderDetail"
        :style="{ paddingTop: contentTop }"
        @touchstart="touchStart"
        @touchend="touchEnd"
    >

    。。。

    </view>




    // 监听滑动距离
    // move x
    let 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].clientX
    console.log('move x :', endX)
    if (endX - startX > 50) {
        // 说明是右滑返回了,自定义滑动事件
        backHandle()
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flutter 页面布局 Flex Expanded弹性布局

题记 —— 执剑天涯&#xff0c;从你的点滴积累开始&#xff0c;所及之处&#xff0c;必精益求精&#xff0c;即是折腾每一天。 什么是弹性布局&#xff08;Flex&#xff09;&#xff1f; 弹性布局&#xff08;Flex&#xff09;是一种基于弹性盒子模型的布局方式&#xff0c;类…

【如何让论文中摘要后面的内容不出现在目录中】

首先选择摘要二字&#xff0c;设置为一级标题&#xff0c;然后选择摘要后面的内容设置为正文样式&#xff0c;再选择这一部分看一下是不是都是正文大纲级别&#xff0c;如果是那就可以了。 具体流程如下 1、选择摘要二字&#xff0c;设置为一级标题样式 2、选择摘要后面的文…

Springboot零星知识点1

1、请求路径的组成 2、多个环境配置文件 3、对 自定义的属性 增加文字描述&#xff0c;而且IDEA不会警告 4、读取属性值的两种方式 5、东东

TP6 模型批量插入获取插入的自增ID

在TP框架中&#xff0c;数据插入 添加一条数据,返回添加成功的条数 $data [foo > bar, bar > foo]; Db::name(user)->save($data); // 或者 Db::name(user)->insert($data); 批量添加 $data [[foo > bar, bar > foo],[foo > bar1, bar > foo1],[…

【管理咨询宝藏112】波士顿现场精益生产及运营管理整体优化方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏112】波士顿现场精益生产及运营管理整体优化方案 【格式】PDF版本 【关键词】波士顿咨询、精益生产、运营提升 【核心观点】 - 家电市场的发展要…

推荐几款新手学习编程的网站

免费在线开发平台 介绍一款编程平台&#xff0c;专为学生和开发者量身打造&#xff01;平台拥有近4000道编程题目&#xff0c;支持多种编程语言&#xff08;包括C、C、JavaScript、TypeScript、Go、Rust、PHP、Java、Ruby、Python3和C#&#xff09;&#xff0c;为您提供全面的学…

蓝桥杯-数三角(ac代码时间复杂度分析)

问题描述 小明在二维坐标系中放置了 ( n ) 个点&#xff0c;他想在其中选出一个包含三个点的子集&#xff0c;这三个点能组成三角形。然而这样的方案太多了&#xff0c;他决定只选择那些可以组成等腰三角形的方案。请帮他计算出一共有多少种选法可以组成等腰三角形&#xff1f…

dubbo复习:(7)使用sentinel对dubbo服务进行限流

一、下载sentinel-dashboard 并启动 java -Dserver.port8080 -Dcsp.sentinel.dashboard.serverlocalhost:8080 -Dproject.namesentinel-dashboard -jar sentinel-dashboard.jar二、在spring boot应用中增加sentinel相关依赖 <dependency><groupId>com.alibaba.csp…

Mybatis Cache(二)MybatisCache+Redis

前面提到了&#xff0c;使用mybatis cache&#xff0c;一般是结合redis使用。 一、demo 1、数据表 create table demo.t_address (id int auto_incrementprimary key,address_name varchar(200) null,address_code varchar(20) null,address_type int n…

Star CCM+在电池热管理中SOC计算、充电Map调用、电池内阻调用的方法

前言 众所周知电池充电电流是随着电池温度与容量变化查表获得(形式见下表),其中电池的充电倍率(电流)是阶梯变化的,而内阻是线型变化的。因此为了仿真的准确定,需要在软件中实现数据的调用,计算电池的发热量。 电池内阻/充电倍率表 一 SOC计算 SOC的估算方法有开路电…

selenium安装出错

selenium安装步骤&#xff08;法1&#xff09;&#xff1a; 安装失败法1 第一次实验&#xff0c;失败 又试了一次&#xff0c;失败 安装法2-失败&#xff1a; ERROR: Could not install packages due to an EnvironmentError: [WinError 5] 拒绝访问。: c:\\programdata\\a…

swust oj 1075: 求最小生成树(Prim算法)

#include <iostream> using namespace std;typedef struct {int n;int e;char data[500];int edge[500][500]; }Graph;typedef struct {int index;int cost; }mincost;typedef struct {int x;//起点int y;//终点int weight;//权重 }EDGE;typedef struct {int index;int …

Bugku Crypto 部分题目简单题解(四)

目录 python_jail 简单的rsa 托马斯.杰斐逊 这不是md5 进制转换 affine Crack it rsa python_jail 启动场景 使用虚拟机nc进行连接 输入print(flag) 发现报错&#xff0c;经过测试只能传入10个字符多了就会报错 利用python中help()函数&#xff0c;借报错信息带出flag变…

2024年商业管理与文化传播国际学术会议(ICBMCC 2024)

2024年商业管理与文化传播国际学术会议&#xff08;ICBMCC 2024) 2024 International Conference on Business Management and Cultural Communication 一、【会议简介】 2024年商业管理与文化传播国际学术会议&#xff08;ICBMCC 2024&#xff09;是一次汇集全球商业管理领域…

SwiftUI中的手势(MagnificationGesture、 RotationGesture)

通过前两篇文章的探索&#xff0c;手势的基本使用规则已经较深的了解&#xff0c;本篇文章主要看看放缩手势MagnificationGesture和旋转手势RotationGesture。 MagnificationGesture 放缩手势 放缩手势在App中用的也比较广泛&#xff0c;下面先看一个示例效果&#xff1a; 上…

必示科技参与智能运维国家标准预研线下编写会议并做主题分享

近日&#xff0c;《信息技术服务 智能运维 第3部分&#xff1a;算法治理》&#xff08;拟定名&#xff09;国家标准预研阶段第一次编写工作会议在杭州举行。本次会议由浙商证券承办。 此次编写有来自银行、证券、保险、通信、高校研究机构、互联网以及技术方等29家单位&#xf…

前端vue 动态加载ts文件,动态调用ts内的方法

业务场景: 在某个业务场景中, 我们需要在数据库配置ts文件路径,和需要调用的函数名称, 前端需要再指定的场景下,触发对应的函数, 并执行处理逻辑,返回结果. 实现: 这是一个数据库配置生成的动态表单 动态校验的例子, 需要引用动态的函数校验 任意一个js文件, common1.ts c…

运算符重载(上)

目录 运算符重载日期类的比较判断日期是否相等判断日期大小 赋值运算符重载赋值运算符重载格式赋值运算符只能重载成类的成员函数不能重载成全局函数用户没有显式实现时&#xff0c;编译器会生成一个默认赋值运算符重载&#xff0c;以值的方式逐字节拷贝 感谢各位大佬对我的支持…

Blender导出fbx模型,导入到ue5中模型丢失纹理材质

UE5系列文章目录 文章目录 UE5系列文章目录前言一、问题原因二、最终效果 前言 Blender导出fbx模型&#xff0c;导入到ue5中&#xff0c;发现模型丢失纹理材质&#xff0c;里面的原神人物模型妮露居然是白模&#xff0c;郁闷了大半天 一、问题原因 我在Blender导出fbx文件时…

如何高效创建与配置工程环境:零基础入门

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、工程环境的搭建与准备 二、配置虚拟环境与选择解释器 三、编写代码与自动添加多行注释 …