uniapp在APP端使用swiper进行页面不卡顿滑动

在这里插入图片描述

uniapp在APP端使用swiper进行页面会卡顿,主要是渲染的数据有点多,这里只渲染三个数据就不好那么卡顿了,每次滑动后更新数据

<view>
		<swiper @change="changePoint" circular :disable-touch="disableTouch">
			<swiper-item v-for="(item, index) in orderSafeMonitorList" :key="index">
				<view class="title">......</view>
			</swiper-item>
		</swiper>
</view>
export default {
		data() {
			return {
				allOrderSafeMonitorList: [],//所有测点数据
				orderSafeMonitorList: [],//部分测点数据(只取三组)
				current: 0, //这是当前所在索引
				swiperIndex: 0, //这是当前swiper在的索引
				disableTouch: false, //是否禁止滑动
			};
		},
		onLoad(option) {
		    this.getData()//获取测点列表
		},
		methods: {
			getData() {
			// 获取测点数据
			this.allOrderSafeMonitorList = '全部测点数据'
			this.getList()
			},
			getList() {
			this.orderSafeMonitorList[1] = this.allOrderSafeMonitorList[this.current]
				this.orderSafeMonitorList[0] = this.current == 0 ? this.allOrderSafeMonitorList[this
					.allOrderSafeMonitorList.length - 1] : this.allOrderSafeMonitorList[this.current - 1]
				this.orderSafeMonitorList[2] = this.current == this.allOrderSafeMonitorList.length - 1 ? this
					.allOrderSafeMonitorList[0] : this.allOrderSafeMonitorList[this.current + 1]
					this.getDetail()//获取测点数据详情
			},
			//获取测点数据详情
			getDetail() {
			this.disableTouch = false//接口请求好了之后即可继续滑动
			this.$forceUpdate();//强制更新页面,这个没写页面可能没办法显示
			},
			//滑动页面
			changePoint(e) {
			this.disableTouch = true//当滑动后禁止继续滑档导致卡顿,等接口请求结束再滑动下个页面
				if (e.detail.current > this.swiperIndex) {
					if (e.detail.current == 2 && this.swiperIndex == 0) {
						// 向右滑-减少
						if (this.current == 0) {
							this.current = this.allOrderSafeMonitorList.length - 1
						} else {
							this.current = this.current - 1
						}
					} else {
						// 向左滑-增加
						if (this.current == this.allOrderSafeMonitorList.length - 1) {
							this.current = 0
						} else {
							this.current = this.current + 1
						}
					}
				} else {
					if (e.detail.current == 0 && this.swiperIndex == 2) {
						// 向左滑-增加
						if (this.current == this.allOrderSafeMonitorList.length - 1) {
							this.current = 0
						} else {
							this.current = this.current + 1
						}
					} else {
						// 向右滑-减少
						if (this.current == 0) {
							this.current = this.allOrderSafeMonitorList.length - 1
						} else {
							this.current = this.current - 1
						}
					}
				}
				this.swiperIndex = e.detail.current
				this.getList()
			}
        }
	}

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

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

相关文章

JAVA代码审计-cms综合篇

前言 JEECGv3.8。下载地址&#xff1a;GitHub - jeecgboot/jeecg at v3.8 java代码审计第一步&#xff1a;查看web.xml 一个重要的servlet&#xff1a;DispatcherServlet&#xff0c; <servlet><description>spring mvc servlet</description><servle…

MySQL缩短查询时间小技巧

背景 今天我要统计数据表的最新更新时间&#xff0c;有些表数据量特别大&#xff0c;所以统计比较费时间&#xff0c;但是如果使用一下小技巧&#xff0c;就会极大加快查询时间&#xff0c;适合小白的调优手段。 查询更新时间 select max(update_time) from test大概表的行数…

2024上海国际人工智能展(CSITF)“创新驱动发展·科技引领未来”

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;作为当今世界科技发展的关键领域之一&#xff0c;正不断推动着各行各业的创新和变革。作为世界上最大的消费市场之一&#xff0c;中国正在积极努力将AI技术与产业融合并加速推广应用。在这个背景下&…

一次cs上线服务器的练习

环境&#xff1a;利用vm搭建的环境 仅主机为65段 测试是否能与win10ping通 配置转发 配置好iis Kali访问测试 现在就用burp抓取winser的包 开启代理 使用默认的8080抓取成功 上线

html获取网络数据,列表展示 第二种

html获取网络数据&#xff0c;列表展示 第二种 js遍历json数组中的json对象 image.png || - 判断数据是否为空&#xff0c;为空就显示 - <!DOCTYPE html> <html><head><meta charset"utf-8"><title>网页列表</title><script …

管理类联考——数学——汇总篇——知识点突破——代数——函数、方程——记忆

文章目录 考点记忆/考点汇总——按大纲 整体局部 本篇思路&#xff1a;根据各方的资料&#xff0c;比如名师的资料&#xff0c;按大纲或者其他方式&#xff0c;收集/汇总考点&#xff0c;即需记忆点&#xff0c;在通过整体的记忆法&#xff0c;比如整体信息很多&#xff0c;通常…

飞致云及其旗下1Panel项目进入2023年第三季度最具成长性开源初创榜单

2023年10月26日&#xff0c;知名风险投资机构Runa Capital发布2023年第三季度ROSS指数&#xff08;Runa Open Source Startup Index&#xff09;。ROSS指数按季度汇总并公布在代码托管平台GitHub上年化增长率&#xff08;AGR&#xff09;排名前二十位的开源初创公司和开源项目。…

ThingsBoard的通知

1、概述 ThingsBoard 通知中心允许您向最终用户发送通知。既可以通过手动触发通知,也可以通过事件触发规则链来发送通知。 在此页面上,可以看到发送通知的按钮和五个选项卡:“收件箱”、“已发送”、“收件人”、“模板”和“规则”。 2、通知的方式 thingsboard的通知中…

基于OpenHarmony的启航开发板的基础操作

文章目录 前言一、前提准备二、基础操作1.hb set命令的使用2.hb build -f 命令的使用3.Hello World 案例 前言 在物联网&#xff08;IoT&#xff09;领域&#xff0c;开发板扮演着至关重要的角色&#xff0c;为开发人员提供了实验和原型设计的平台。而OpenHarmony作为一个开源…

C语言调试技巧(debug)及程序运行时出现的问题

目录 一、什么是调试 1.介绍调试 2.Debug与Release 3.Debug与Release的对比 二、怎么调试 1.介绍几个调试快捷键 2.调试的时候查看程序当前信息 三、常见编程错误 1.编译型错误&#xff08;最简单&#xff09; 2.链接型错误 3.运行时错误&#xff08;最难&#xff0…

数据库-引擎

存储引擎&#xff1a; mysql当中数据用各中不同的技术存储在文件中&#xff0c;每一种技术都使用的是不同的存储机制&#xff0c;索引技巧 索引水平&#xff0c;以及最终提供的不同功能和能力&#xff0c;这些就是我们说的引擎。 功能&#xff1a; mysql将数据存储在文件系统…

使用pytorch处理自己的数据集

目录 1 返回本地文件中的数据集 2 根据当前已有的数据集创建每一个样本数据对应的标签 3 tensorboard的使用 4 transforms处理数据 tranfroms.Totensor的使用 transforms.Normalize的使用 transforms.Resize的使用 transforms.Compose使用 5 dataset_transforms使用 1 返回本地…

五年制专转本的备考是多方面的较量

转本复习已进入下半场&#xff0c;同学们不能再慢悠悠地看书了&#xff01;接下来就是很多人备考的发力期&#xff0c;能否弯道超车就要看个人的把握。 1、自控与时间管理 转本考的知识就是那么多&#xff0c;只需要你高效地投入一定的时间和精力就能够掌握。问题是一些同学做…

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割7(数据预处理)

在上一节&#xff1a;【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割6&#xff08;数据预处理&#xff09; 中&#xff0c;我们已经得到了与mhd图像同seriesUID名称的mask nrrd数据文件了&#xff0c;可以说是一一对应了。 并且&#xff0c;mask的文件&#xff0c;还根据结…

【算法|滑动窗口No.3】leetcode3. 无重复字符的最长子串

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

课题学习(十)----阅读《基于数据融合的近钻头井眼轨迹参数动态测量方法》论文笔记

一、 引言 该论文针对三轴加速度计、磁通门和速率陀螺随钻测量系统&#xff0c;建立了基于四元数井眼轨迹参数测量模型&#xff0c;并依据状态方程和量测方程&#xff0c;应用2个扩卡尔曼滤波器、1个无迹卡尔曼滤波器和磁干扰校正系统对加速度计、磁通门信号进行滤波、校正&…

【从瀑布模式到水母模式:ChatGPT如何赋能软件研发全流程】

你是否曾读过一本让你欲罢不能的计算机书籍&#xff1f;它可能为你打开了新的技术世界大门&#xff0c;或者是帮助你解决了棘手的编程难题。 前言&#xff1a; 计算机技术的发展和互联网的普及&#xff0c;使信息处理和传输变得更加高效&#xff0c;极大地改变了金融、商业、…

超低价:阿里云双11服务器优惠价格表_87元一年起

2023阿里云双十一优惠活动已经开启了&#xff0c;轻量2核2G服务器3M带宽优惠价87元一年、2核4G4M带宽优惠价165元一年&#xff0c;云服务器ECS经济型e实例2核2G3M固定带宽优惠价格99元一年&#xff0c;还有2核4G、2核8G、4核8G、4核16G、8核32G等配置报价&#xff0c;云服务器e…

解决爬虫在重定向(Redirect)情况下,URL没有变化的方法

重定向是一种网络服务&#xff0c;它可以实现从一个网页跳转到另一个网页的功能。它把用户请求的网页重定向到一个新的位置&#xff0c;而这个位置可以是更新的网页&#xff0c;或最初请求的网页的不同版本。另外&#xff0c;它还可以用来改变用户流量&#xff0c;当用户请求某…
最新文章