当前位置: 首页 > 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 代码编写总结 前言 常见的…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...