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

news2024/12/27 11:04:54

想要在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()
    }
}

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

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

相关文章

RabbitMQ(一)概述第一个应用程序

文章目录 概述AMQP和JMS官网安装开始第一个程序 概述 消息队列是实现应用程序和应用程序之间通信的中间件产品 AMQP和JMS 工作体系 官网 https://www.rabbitmq.com/ RabbitMQ是一款基于AMQP、由Erlang语言开发的消息队列产品 安装 # 拉取镜像 docker pull rabbitmq:3.13-m…

微信小程序画布显示图片绘制矩形选区

wxml <view class"page-body"><!-- 画布 --><view class"page-body-wrapper"><canvas canvas-id"myCanvas" type"2d" id"myCanvas" classmyCanvas bindtouchstart"touchStart" bindtouchmo…

UEFI EDK2源码学习(一)——环境安装

部署环境 vmvare15.0 ubuntu20.04 docker edk2 源码 具体步骤 docker安装 # 更新apt软件包索引 sudo apt-get update# 添加docker依赖 sudo apt-get install -y \apt-transport-https \ca-certificates \curl \gnupg-agent \software-properties-common# 添加docker 官方…

白嫖免费图床!CloudFlare R2太香了!

1 为啥要折腾搭建一个专属图床&#xff1f; 技术大佬写博客都用 md 格式&#xff0c;要在多平台发布&#xff0c;图片就得有外链后续如博客迁移&#xff0c;国内博客网站如掘金&#xff0c;简书&#xff0c;语雀等都做了防盗链&#xff0c;图片无法迁移 2 为啥选择CloudFlare…

力扣刷题---返回word中所有不重复的单词

当需要从一个数据集合中去除重复元素时&#xff0c;set是一个很好的选择。由于其不允许存储重复的元素&#xff0c;因此可以很容易地实现去重功能。这在处理原始数据或进行数据分析时特别有用。 题目&#xff1a; 给定一个字符串数组 words&#xff0c;请返回一个由 words 中所…

SpringCloud微服务03-微服务保护-分布式事务-MQ基础-MQ高级

一、微服务保护 1.雪崩问题 如何做好后备方案就是后续&#xff1a; 2.雪崩解决方案 某一个服务的线程是固定的&#xff0c;出现故障线程占满后&#xff0c;就不会让取调用这个服务&#xff0c;对其他服务就没有影响。 3.Sentinel ①初识Sentinel 配置过程&#xff1a;day05-服…

Unity 实现心电图波形播放(需波形图图片)

实现 在Hierarchy 面板从2D Object 中新建一个Sprite&#xff0c;将波形图图片的赋给Sprite。 修改Sprite 的Sprite Renderer 组件中Draw Mode 为Tiled, 修改Sprite Renderer 的Size 即可实现波形图播放。 在Hierarchy 面板从2D Object 中新建一个Sprite Mask 并赋以遮罩图片…

表现层框架设计之表现层设计模式_2.MVP模式

1.MVP模式 MVP&#xff08;Model-View-Presenter&#xff09;模式提供数据&#xff0c;View负责显示&#xff0c;Controller/Presenter负责逻辑的处理。MVP是从经典的模式MVC演变而来&#xff0c;它们的基本思想有相通的地方&#xff1a;Controller/Presenter负责逻辑的处理&am…

10款手机黑科技app,每款都好用到爆!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 1. 计划程序应用 —— Android Auto Text Android Auto Text&#xff08;前身为 Do It Later&#xff09;是一款简单易用的日程安排应用程序&am…

LLM实战:当网页爬虫集成gpt3.5

1. 背景 最近本qiang~关注了一个开源项目Scrapegraph-ai&#xff0c;是关于网页爬虫结合LLM的项目&#xff0c;所以想一探究竟&#xff0c;毕竟当下及未来&#xff0c;LLM终将替代以往的方方面面。 这篇文章主要介绍下该项目&#xff0c;并基于此项目实现一个demo页面&#x…

can设备调试 - linux driver

这篇文章主要介绍can设备的调试相关信息&#xff0c;不具体介绍驱动的实现。 如果驱动写完&#xff0c;对can设备进行验证&#xff0c;可能会出现很多不可预见的问题。下面说说验证步骤 验证can设备可以使用工具can-utils。这个工具包中会有cansend candump等程序。可以直接通…

找钢集团亮相沙特利雅得建筑行业供应链展会

5月20日-21日&#xff0c;找钢产业互联集团&#xff08;以下简称&#xff1a;找钢集团&#xff09;亮相沙特利雅得建筑行业供应链展会。本次展会由沙特阿拉伯国家住房公司&#xff08;NHC&#xff09;主办&#xff0c;中信建设协办&#xff0c;涵盖住房新科技、绿色环保等多个主…

C语言例题46、根据公式π/4=1-1/3+1/5-1/7+1/9-1/11+…,计算π的近似值,当最后一项的绝对值小于0.000001为止

#include <stdio.h> #include <math.h>int main() {int fm 1;//分母double sign 1;//正负号double fzs 1;//分子式double sum 0;while (fabs(fzs) > 0.000001) {sum fzs;sign * -1; //变换正负号fm 2; //分母3、5、7、9...增长fzs sign / fm;//分子式…

Pod容器资源限制和探针

目录 一、资源限制 1.Pod和容器的资源请求和限制 2.CPU 资源单位 案例一 案例二 二、健康检查&#xff0c;又称为探针&#xff08;Probe&#xff09; 1.探针的三种规则 2.Probe支持三种检查方法 3.探测获得的三种结果 案例一&#xff1a;exec 案例二&#xff1a;htt…

[NOIP2002]过河卒 标准递归

题目地址 登录—专业IT笔试面试备考平台_牛客网 输入输出描述 如果没有马存在 就是一个经典的递归题 // Dduo // Bhu Bigdata 1421 package Dduo; import java.util.*; // Eslipse IDE 2020-08 // JDK 1.8 // 2024/5/21public class Main {static Scanner scnew Scanner(Sy…

linux命令日常使用思考

linux命令日常使用思考 复制的相关问题scp和cp的区别root192.168.5.229-r的理解 更新版本的相关问题svn info 根目录和家目录的区别根目录家目录 复制的相关问题 scp和cp的区别 安全性&#xff1a;SCP 是基于 SSH 的加密传输协议&#xff0c;可以保证数据在传输过程中的安全性…

Midjourney应用场景、特点、生成图片带来影响

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人&#xff0c;旨在提供多领域的智能对话服务。本文主要介绍Midjourney的应用场景、功能特点、图片生成后可以做什么&#xff1f; 一、Midjourney应用场景 Midjourney的应用场景相当广泛&#xff0c;以下是一些主要的适用…

HTML5好看的通用网站模板源码

文章目录 1.设计来源1.1 主界面1.2 模板菜单1 界面1.3 模板菜单2 界面1.4 模板菜单3 界面1.5 下拉菜单1 界面1.6 下拉菜单2 界面1.7 模板菜单4 界面1.8 模板菜单5 界面1.9 界面底部 2.效果和源码2.1 动态效果2.2 源码目录2.3 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址…

学习通高分免费刷课实操教程

文章目录 概要整体架构流程详细步骤云上全平台登录步骤小结 概要 我之前提到过一个通过浏览器的三个脚本就可以免费高分刷课的文章&#xff0c;由于不方便拍视频进行实操演示&#xff0c;然后写下了这个实操教程&#xff0c;之前的三个脚本划到文章末尾 整体架构流程 整体大…