uniapp 微信小程序实现监听屏幕左右滑动实现tab标签切换效果

需求背景:

        实际的项目开发之中,有很多所谓的奇葩需求,当工程量相对较大的时候去更换组件会显得特别麻烦和费时。我这次的需求因为某些特殊原因,更换组件后也无法实现需要达到的效果,所以最后只能监听滑动事件,相信你看了我的代码也能轻松搞定!

         @touchstart="touchStart" @touchend="touchEnd" @touchcancel="touchCancel" 是主要的函数,写在你要监听的盒子上。

<view class="swiper-title" @touchstart="touchStart" @touchend="touchEnd" @touchcancel="touchCancel">{{item.name}}</view>
		data() {return {minOffset: 50, //最小偏移量,低于这个值不响应滑动处理minTime: 60, // 最小时间,单位:毫秒,低于这个值不响应滑动处理startX: 0, //开始时的X坐标startY: 0, //开始时的Y坐标startTime: 0, //开始时的毫秒数animationData: {},};},
touchStart(e) {// console.log('touchStart', e)this.startX = e.touches[0].pageX; // 获取触摸时的x坐标  this.startY = e.touches[0].pageY; // 获取触摸时的x坐标this.startTime = new Date().getTime(); //获取毫秒数},touchCancel: function(e) {this.startX = 0; //开始时的X坐标this.startY = 0; //开始时的Y坐标this.startTime = 0; //开始时的毫秒数},touchEnd: function(e) {// console.log('touchEnd', e)var endX = e.changedTouches[0].pageX;var endY = e.changedTouches[0].pageY;var touchTime = new Date().getTime() - this.startTime; //计算滑动时间//开始判断//1.判断时间是否符合if (touchTime >= this.minTime) {//2.判断偏移量:分X、Yvar xOffset = endX - this.startX;var yOffset = endY - this.startY;// console.log('xOffset', xOffset)// console.log('yOffset', yOffset)//①条件1(偏移量x或者y要大于最小偏移量)//②条件2(可以判断出是左右滑动还是上下滑动)if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= this.minOffset) {//左右滑动//③条件3(判断偏移量的正负)if (xOffset < 0) {// console.log('向左滑动 下一页')if(this.current + 1 < this.tabList.length) {this.current ++this.animation.translateX(-190).step()}else return} else {// console.log('向右滑动')if(this.current > 0) {this.current --if(this.current > 1) this.animation.translateX(190).step()}else return}this.change(this.current)this.animationData = this.animation.export()} else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= this.minOffset) {//上下滑动//③条件3(判断偏移量的正负)if (yOffset < 0) {// console.log('向上滑动')} else {// console.log('向下滑动')}}} else {// console.log('滑动时间过短', touchTime)}},

        this.animation.translateX(190).step() 是动画效果和监听滑动无关,如果你想效果更好也可以像我一样在onLoad中使用uni.createAnimation()创建一个动画效果并使用它!

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

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

相关文章

构建IT项目价值管理体系︱陆金所控股有限公司项目管理专家朱磊

陆金所控股有限公司项目管理专家朱磊先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;陆控-构建IT项目价值管理体系。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; IT资源有限&#xff0c;…

模仿火星科技 基于cesium+水平面积测量+可编辑

​ 当您进入Cesium的编辑水平积测量世界&#xff0c;下面是一个详细的操作过程&#xff0c;帮助您顺利使用这些功能&#xff1a; 1. 创建提示窗&#xff1a; 启动Cesium应用&#xff0c;地图场景将打开&#xff0c;欢迎您进入编辑模式。 在屏幕的一角&#xff0c;一个友好的提…

山西电力市场日前价格预测【2023-08-10】

日前价格预测 预测明日&#xff08;2023-08-10&#xff09;山西电力市场全天平均日前电价为328.01元/MWh。其中&#xff0c;最高日前电价为366.62元/MWh&#xff0c;预计出现在20: 00。最低日前电价为283.28元/MWh&#xff0c;预计出现在13: 15。 价差方向预测 1&#xff1a; 实…

Linux 的基本使用

1、Linux 是什么 Linux 是一个操作系统. 和 Windows 是 "并列" 的关系 Linux 严格意义来说只是一个 "操作系统内核". 一个完整的操作系统 操作系统内核 配套的应用程序. CentOS 和 RedHat 的关系 RedHat一直都提供源代码的发行方式&#xff0c;Cent…

期刊和会议缩写查询网站

1.https://pubmed.ncbi.nlm.nih.gov/?termMedicalImageComputingandComputer-AssistedIntervention 2. http://www.letpub.com.cn/index.php?pagejournalapp&viewsearch 3. https://blog.csdn.net/weixin_44557349/article/details/120825927 https://blog.csdn.net/ret…

\vendor\github.com\godror\orahlp.go:531:19: undefined: VersionInfo

…\goAdmin\vendor\github.com\godror\orahlp.go:531:19: undefined: VersionInfo 解决办法 降了go版本(go1.18)&#xff0c;之前是go1.19 gorm版本不能用最新的&#xff0c;降至&#xff08;gorm.io/gorm v1.21.16&#xff09;就可以 修改交插编译参数 go env -w CGO_ENABLED1…

电脑ip地址怎么切换 如何更改电脑ip地址

电脑IP地址怎么切换&#xff1f;在日常使用电脑上网过程中&#xff0c;我们可能会遇到需要切换IP地址的情况。IP地址是用于标识互联网上设备的一串数字&#xff0c;我们可以通过更改该地址来实现一些特定的需求。本文将简单介绍一些常见的切换IP地址的方法。 随着互联网的普及和…

【Redis】Spring/SpringBoot 操作 Redis Java客户端

目录 操作 Redis Java客户端SpringBoot 操作Redis 步骤 操作 Redis Java客户端 1.Jedis 2.Lettuce(主流) <-Spring Data Redis SpringBoot 操作Redis 步骤 1.添加Redis 驱动依赖 2.设置Redis 连接信息 spring.redis.database0 spring.redis.port6379 spring.redis.host…

Stable Diffusion - 哥特 (Goth) 风格服装与背景的 LoRA 配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132177882 图像来源于 Goth Clothing 的 LoRA 效果&#xff0c;配合哥特 (Goth) 风格服饰的相关提示词。 测试模型&#xff1a;DreamShaper 8 哥…

HTTPS安全通信

HTTPS,TLS/SSL Hyper Text Transfer Protocol over Secure Socket Layer,安全的超文本传输协议,网景公式设计了SSL(Secure Sockets Layer)协议用于对Http协议传输的数据进行加密,保证会话过程中的安全性。 使用TCP端口默认为443 TLS:(Transport Layer Security,传输层…

java日期常用操作

Testpublic void validateDateUtils(){// 1 字符串转换日期Date result DateUtil.parse("2023-08-01", com.alibaba.excel.util.DateUtils.DATE_FORMAT_10);log.info("result : [{}]" , result);// 2 日期转换字符串final Date date new Date();String f…

Vue3 动态列 <el-table-column> 实现 formatter 的两种方法

文章目录 动态列实现动态列实现formatter第一种第二种方法 动态列实现 参考此篇文章 Vue3 动态列实现 动态列实现formatter 第一种 以此为例&#xff1a;传递该行的wxUserInfo字段&#xff08;对象&#xff09;中的nickName 假设该行 {prop: "wxUserInfo", label: …

oracle创建管理用户并授权

oracle创建管理用户并授权 创建用户 create user test identified by test;修改密码 alter user test identified by 123456;删除用户 drop user test;删除拥有对象的用户 若用户拥有对象&#xff0c;则不能直接删除&#xff0c;否则将返回一个错误值。指定关键字cascade,…

(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

前言&#xff1a;本文主要介绍在企业使用Python搭建接口自动化测试框架&#xff0c;数据驱动读取excel表里的数据&#xff0c;和数据库方面的交互&#xff0c;包括关系型数据库Mysql和非关系型数据库MongDB&#xff0c;连接数据库&#xff0c;读取数据库中数据&#xff0c;最后…

Openlayers实战:多数据分散聚合

在飞机、轮船等地图显示的应用中,很多时候会用到数据聚合,Openlayers中提供了Cluster这个API ,他作为souce的一部分,设定distance值,如果2个点的间距小于 distance 所设置的数时,就会以聚合的方式显示。从而解决了数据淤积显示的状态,非常实用。 效果图 源代码 /* * @…

倒置字符串(C语言)

题目描述&#xff1a;将一句话的单词进行倒置&#xff0c;标点不倒置。比如 "I like beijing."&#xff0c;经过处理后变为&#xff1a;"beijing. like I"。字符串长度不超过100。输入描述&#xff1a;输入一个仅包含小写字母、空格、. 的字符串&#xff0…

throw和throws的区别

在Java中&#xff0c;throw和throws是两个关键字&#xff0c;用于异常处理。它们具有以下区别&#xff1a; 1. throw关键字&#xff1a; - throw关键字用于主动抛出异常。当程序执行到throw语句时&#xff0c;会创建一个异常对象并将其抛出。 - throw语句通常在方法内部…

使用svg生成图像

使用svg生成图像 每个HTML开发人员都应该对可伸缩的向量图形有一个基本的理解。本文会通过使用svg创建一个雨伞图像来介绍一下svg的基本知识。 svg介绍 SVG 意为可缩放矢量图形&#xff08;Scalable Vector Graphics&#xff09;。是一种可以在HTML中创建图像的方式。 我们…

【ChatGPT 指令大全】销售怎么借力ChatGPT提高效率

目录 销售演说 电话销售 产出潜在客户清单 销售领域计划 销售培训计划 总结 随着人工智能技术的不断进步&#xff0c;我们现在有机会利用ChatGPT这样的智能助手来改进我们的销售工作。在接下来的时间里&#xff0c;我将为大家介绍如何运用ChatGPT提高销售效率并取得更好的…

PCB制造中铜厚度的重要性

电子产品中的PCB是现代电子设备中不可或缺的一部分。在PCB制造过程中&#xff0c;铜厚度是一个非常重要的因素。正确的铜厚度可以保证电路板的质量和性能&#xff0c;同时也影响着电子产品的可靠性和稳定性。 一般我们常见的铜厚有17.5um&#xff08;0.5oz&#xff09;&#x…