当前位置: 首页 > news >正文

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.currentthis.getList()}}}

相关文章:

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

uniapp在APP端使用swiper进行页面会卡顿&#xff0c;主要是渲染的数据有点多&#xff0c;这里只渲染三个数据就不好那么卡顿了&#xff0c;每次滑动后更新数据 <view><swiper change"changePoint" circular :disable-touch"disableTouch"><…...

遗憾

《遗憾》 文&#xff0f;罗光记 岁月匆匆如梦过&#xff0c; 回首往事泪沾裳。 遗憾犹存心深处&#xff0c; 青春岁月已成伤。...

hustoj 平台

1.大部分功能和选项的开关和参数调整都在配置文件中&#xff0c;安装后几个重要配置文件的位置如下&#xff1a; /home/judge/etc/judge.conf #判题judged/judge_client /home/judge/src/web/include/db_info.inc.php #Web debian-sys-maint gdfNPYOdITxtDEK1 修改MySQl管…...

如何使用Scrapy提取和处理数据

目录 一、安装和设置Scrapy 二、创建爬虫 三、提取数据 四、处理数据 五、存储数据 六、进阶操作 七、注意事项 总结 Scrapy是一个强大且灵活的Python库&#xff0c;用于创建网页爬虫&#xff0c;提取和处理数据。本文将为您深入讲解如何使用Scrapy进行数据处理&#x…...

拟合与过拟合

拟合跟过拟合 过拟合&#xff1a;将泛化误差分解为偏差跟方差 偏差&#xff1a;学习者不断学习相同错误事物的倾向 方差&#xff1a;学习随机信号而不考虑真实情况的趋势 过拟合:所建的机器学习模型或者深度学习模型在训练样本中表现得过于优越&#xff0c;导致测试数据集表现…...

科学化决策数据分析,先从量化开始

在当今信息爆炸的时代&#xff0c;数据已经成为我们生活和工作中不可或缺的一部分。在各行各业&#xff0c;人们越来越依赖数据来指导决策和优化业务。在这个背景下&#xff0c;量化成为了一种重要的方法论&#xff0c;通过收集、分析和解读数据&#xff0c;为我们提供了更准确…...

使用Docker搭建一个“一主两从”的 Redis 集群(超详细步骤)

目录 1、Redis 单机版安装1.1 拉取 Redis1.2 创建数据卷目录1.3 修改 redis.conf1.4 启动 Redis 容器1.5 进入容器连接 Redis 2、Redis 一主两从集群搭建2.1 复制三份 redis.conf2.2 启动 master2.3 启动 两个redis slave2.4 三者关系查看2.5 数据测试 1、Redis 单机版安装 1.…...

阿里云盘第三方linux客户端“小白羊”云盘“Aria2本地连接已断开”错误的解决方法

简介 随着数据的不断增长&#xff0c;我们需要更大的存储空间来保存我们的信息。阿里云盘是阿里巴巴推出的一款云存储服务&#xff0c;它提供了大量可扩展的存储空间。然而&#xff0c;阿里云盘官方没有提供Linux操作系统的客户端。 在这种情况下&#xff0c;“小白羊”云盘…...

Linux flock和fcntl函数详解

文章目录 flock函数描述返回值和错误码笔记 fcntl函数描述复制文件描述符文件描述标志文件状态标志 咨询锁强制锁管理信号租赁文件和目录变更通知改变管道容量 返回值错误备注遗留问题 flock函数 主要功能是在已打开的文件应用或者删除共享锁或者独占锁。sys/file.h声明了这个…...

React 组件点击事件

点击事件 点击事件方式1、传统类方法&#xff08;不推荐&#xff09;2、传统类方法 16.3.0 - 自动绑定&#xff08;不推荐&#xff09;3、箭头函数3.1、类组件3.2、函数组件3.3、内联箭头函数 4、useState Hook 点击事件方式 1、传统类方法&#xff08;不推荐&#xff09; 当…...

Windows 下编译 TensorFlow 2.9.1 CC库

参考 Intel 的 tensorflow 编译指导&#xff0c;不过项目还是可以用 TF原本的&#xff0c;不是一定要选择Intel 的TF版本。 安装 MSVC 2019 安装 Intel OneDNN OneMKL 似乎也可以不安装 ( & ) https://www.intel.cn/content/www/cn/zh/developer/articles/tool/one…...

Databricks 入门之连接外部数据库

连接方式应该很多&#xff0c;现在记录本人目前学习到的一种方式。 一、读取外部数据库 1.notebook执行语言为sql时可以通过JDBC方式加载数据库数据。 以下代码将可以将sqlserver中的表加载到databricks视图中&#xff0c;当然也可创建表来接收外部数据。 %sqlCREATE TEMPOR…...

家庭互动新维度:TikTok的亲子体验

在数字时代&#xff0c;家庭互动的方式正在发生翻天覆地的改变。社交媒体平台TikTok崭露头角&#xff0c;不仅在年轻用户中广受欢迎&#xff0c;还为家庭带来了全新的互动维度。本文将深入探讨TikTok如何成为家庭互动的新元素&#xff0c;以及它如何改变亲子体验。 TikTok&…...

redis教程 一 redis中的常用命令

文章目录 redis常见命令Redis数据结构介绍redis通用命令String类型String的常见命令Key结构 Hash类型List类型Set类型SortedSet类型 redis常见命令 Redis数据结构介绍 Redis是一个key-value的数据库&#xff0c;key一般是String类型&#xff0c;不过value的类型多种多样&…...

【第28例】IPD体系进阶 | 需求管理:需求实现过程

目录 简介 内容详解 CSDN学院相关推荐 作者简介 简介 继续 IPD 体系中的需求管理相关的专题。 先来看看整个需求管理涉及的过程内容: 需求管理流程主要包含五个阶段: 需求收集; 需求分析; 需求分发/分配;...

聊聊我对AI Agents技术的一些看法

小伙伴们&#xff01;我来兑现承诺啦&#xff5e; ps&#xff1a;接下来期待什么内容&#xff0c;欢迎在评论区留言&#xff01; 今天&#xff0c;我们就来聊聊大模型 Agent。 最近这几个月&#xff0c;Agent 这一概念可谓火出天际&#xff0c;从 AutoGPT 一周 6 万 star 刷新…...

32 mysql in 的实现

前言 这里我们主要是来探讨一下 mysql 中 in 的使用, find_in_set 的使用 这两者 在我们实际应用中应该也是 非常常用的了 测试数据表如下 CREATE TABLE tz_test (id int(11) unsigned NOT NULL AUTO_INCREMENT,field1 varchar(16) DEFAULT NULL,field2 varchar(16) DEFAU…...

Qt QtCreator添加自定义注释

在写代码的时候我们为了规范化&#xff0c;一般会加文件注释、类注释和函数注释&#xff1b;用注释来说明我们的代码&#xff0c;也方便模块化开发&#xff0c;那么我们在写注释的时候经常会写一些重复的内容&#xff0c;我们会复制粘贴。这样一来二去&#xff0c;就显得很繁琐…...

docker 各种命令

-v 或 --volume 由三个由冒号&#xff08;:&#xff09;分隔的字段组成&#xff0c;[HOST-DIR:]CONTAINER-DIR[:OPTIONS]。 HOST-DIR 代表主机上的目录或数据卷的名字。省略该部分时&#xff0c;会自动创建一个匿名卷。如果是指定主机上的目录&#xff0c;需要使用绝对路径。 C…...

【优选算法系列】【专题五位运算】第一节.常见的位运算(面试题 01.01. 判定字符是否唯一和268. 丢失的数字)

文章目录 前言常见的位运算一、判定字符是否唯一 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写二、丢失的数字 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写总结 前言 常见的…...

终极CoreUI Bootstrap管理模板:5个导航组件实战技巧提升用户体验

终极CoreUI Bootstrap管理模板&#xff1a;5个导航组件实战技巧提升用户体验 【免费下载链接】coreui-free-bootstrap-admin-template coreui/coreui-free-bootstrap-admin-template: CoreUI-Free-Bootstrap-Admin-Template 是一套免费的Bootstrap 4/5管理模板&#xff0c;包含…...

智能驾驶中的惯性导航:从L2到L4的IMU选型指南(2023最新)

智能驾驶中的惯性导航&#xff1a;从L2到L4的IMU选型指南&#xff08;2023最新&#xff09; 当特斯拉Model 3在隧道中失去GPS信号时&#xff0c;车载IMU仍能保持厘米级定位精度——这背后是惯性导航技术在自动驾驶领域的革命性应用。不同于消费级电子设备中仅用于计步的简易传感…...

Xcode设备兼容性难题的高效破解方案:跨版本调试支持工具(含自动化部署功能)

Xcode设备兼容性难题的高效破解方案&#xff1a;跨版本调试支持工具&#xff08;含自动化部署功能&#xff09; 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 当iOS开发者面对…...

终极STL转STEP指南:如何轻松实现3D网格到CAD实体的无缝转换

终极STL转STEP指南&#xff1a;如何轻松实现3D网格到CAD实体的无缝转换 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在3D设计和制造领域&#xff0c;数据格式的兼容性问题常常成为工作流程中…...

告别AD7606!用ZYNQ的PL+PS协同处理搞定24位8通道同步ADC采集(基于AXI总线与HLS)

ZYNQ平台下的高精度多通道同步采集系统设计实战 在工业测量、医疗设备和科研仪器等领域&#xff0c;对多通道高精度同步数据采集的需求日益增长。传统方案如AD7606虽然成熟稳定&#xff0c;但在24位分辨率、8通道同步采集等高性能场景下已显力不从心。本文将分享如何基于ZYNQ S…...

别再手动调顺序了!用Vue3+Element Plus+Sortable.js给你的表格加个拖拽编辑弹窗(附完整代码)

Vue3Element PlusSortable.js打造高交互表格编辑弹窗实战 后台管理系统开发中&#xff0c;表格数据的顺序调整和字段管理一直是高频痛点。传统方案往往需要反复点击"上移/下移"按钮或填写表单参数&#xff0c;操作繁琐且体验割裂。本文将带你实现一个弹窗内一站式拖…...

Wan2.2-I2V-A14B开发者实践:基于FastAPI封装私有视频生成服务

Wan2.2-I2V-A14B开发者实践&#xff1a;基于FastAPI封装私有视频生成服务 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文本到视频生成任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像将帮助开发者快速搭建私有视频生成服务…...

HY-MT1.5-1.8B保姆级部署指南:在4090D上快速搭建多语言翻译服务

HY-MT1.5-1.8B保姆级部署指南&#xff1a;在4090D上快速搭建多语言翻译服务 1. 引言 你是否遇到过这样的场景&#xff1a;需要快速翻译大量文档&#xff0c;但担心隐私泄露不敢使用在线服务&#xff1f;或者开发智能硬件产品时&#xff0c;需要内置高质量的离线翻译功能&…...

从‘大胖老师’到‘小学霸’:用动态蒸馏拯救被剪枝‘剪残’的小模型

从‘大胖老师’到‘小学霸’&#xff1a;动态蒸馏如何拯救剪枝后的模型性能 想象一下&#xff0c;你有一位知识渊博的"大胖老师"——一个经过精心训练的大型神经网络模型。为了让它更轻便、更高效&#xff0c;你决定给它"减肥"&#xff08;结构化剪枝&…...

彩灯广告屏PLC控制S7-200程序:包含后发送产品梯形图、接线图原理图及IO分配与组态画面详解

彩灯广告屏的PLC控制S7-200程序 程序 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面上周刚帮客户搞定了一套户外彩灯广告屏的PLC控制项目&#xff0c;用的还是经典的S7-200&#xff0c;本来以为老架构玩不出花…...