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()}}}

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

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

相关文章

速卖通新卖家有必要测评吗?

大家都知道通过测评可以提升产品的转化率&#xff0c;提升产品的销量&#xff0c;那么做速卖通的卖家有必要测评吗&#xff1f; 测评就是类似于国内电商的补单&#xff0c;而一个类目里面竞争很大很卷的话&#xff0c;不去补销量来提升产品的权重&#xff0c;凭借着平台给的自…

静态链表的定义与实现(数据结构与算法)

1. 静态链表 用数组的方式实现的链表 单链表&#xff1a; 各个结点在内存中星罗棋布、散落天涯 静态链表&#xff1a;分配一整片连续的内存空间&#xff0c; 各个结点集中安置。 1.1 静态链表的优点 不需要像动态链表那样频繁地进行内存分配和释放&#xff0c;可以节省内存…

2010年408计网

下列选项中, 不属于网络体系结构所描述的内容是&#xff08;C&#xff09;A. 网络的层次B. 每层使用的协议C. 协议的内部实现细节D. 每层必须完成的功能 本题考查网络体系结构的相关概念 再来看当今世界最大的互联网&#xff0c;也就是因特网。它所采用的TCP/IP 4层网络体系结…

Java自学第2课:Java语言基础知识要点

1 Java主类结构 任务&#xff1a;创建新项目名为item&#xff0c;包名为number&#xff0c;类名为first。 1.1 包声明 不指定包时&#xff0c;默认就是工程名&#xff0c;指定后&#xff0c;类文件可以分类了&#xff0c;是这意思吧。包就大概等于一个文件夹。而且在类文件中…

PS学习笔记合集

2.一些快捷键 一、放大快捷键 Ctrl&#xff1a;在画布中点击一次&#xff0c;即可放大一次&#xff0c;可多次点击。 CtrlShift&#xff1a;在画布中点击一次&#xff0c;即可放大到适合窗口大小。 CtrlAlt&#xff1a;在画布中点击一次&#xff0c;即可放大到适合窗口大小&a…

爱写bug的小邓程序员个人博客

博客网址: http://www.006969.xyz 欢迎来到我的个人博客&#xff0c;这里主要分享我对于前后端相关技术的学习笔记、项目实战经验以及一些技术感悟。 在我的博客中&#xff0c;你将看到以下主要内容&#xff1a; 技术文章 我将会分享我在学习前后端技术过程中的一些感悟&am…

基于单片机的可穿戴个人健康监测仪-智能手环

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、方案的设计与论证2.1设计任务及要求2.2 模块技术和方法综述2.3 设计可能遇到的困难 二、 系统总体框架3.1 硬件设计 三 软件部分4.1 主程序流程框 四、 结论五、 文章目录 概要 近几年智能化的不断发展&#…

JavaEE平台技术——预备知识(Web、Sevlet、Tomcat)

JavaEE平台技术——预备知识&#xff08;Web、Sevlet、Tomcat&#xff09; 1. Web基础知识2. Servlet3. Tomcat并发原理 1. Web基础知识 &#x1f192;&#x1f192;上个CSDN我们讲的是JavaEE的这个渊源&#xff0c;实际上讲了两个小时的历史课&#xff0c;给大家梳理了一下&a…

计算机组成与结构-计算机体系结构

计算机体系结构 指令系统 Flynn分类法 SISD&#xff08;单指令流单数据流&#xff09; 结构 控制部分&#xff1a;一个处理器&#xff1a;一个主存模块&#xff1a;一个 代表 单处理器系统 SIMD&#xff08;单指令流多数据流&#xff09; 结构 控制部分&#xff1a;一个处理…

C++ 算法:区间和的个数

涉及知识点 归并排序 题目 给你一个整数数组 nums 以及两个整数 lower 和 upper 。求数组中&#xff0c;值位于范围 [lower, upper] &#xff08;包含 lower 和 upper&#xff09;之内的 区间和的个数 。 区间和 S(i, j) 表示在 nums 中&#xff0c;位置从 i 到 j 的元素之和…

基于单片机设计的电子柜锁

一、前言 随着现代社会的不断发展&#xff0c;电子柜锁的应用越来越广泛。传统的机械柜锁存在一些不便之处&#xff0c;例如钥匙容易丢失、密码容易泄露等问题。设计一款基于单片机的电子柜锁系统成为了一个有趣而有意义的项目。 该电子柜锁系统通过电磁锁作为柜锁的开关&…

【JMeter参数化】上一个接口返回作为下一个接口入参

前言: 实际工作场景当中,比如获取到商品列表,并查看商品详情。如果将商品id写死,就很笨拙。所以我们可以进行参数化动态去更新商品id 目录 【同一个线程组内的】 场景1:接口A仅取一个值,作为接口B的入参 场景:接口A是获取教师列表中某个教室的id,接口B是查看该教师的详…

建筑能源管理(8)——合同能源管理

1、简介 合同能源管理是20世纪70年代中期在发达国家逐步发展起来的一种节能服务机制在国外简称EPC(Energy Performance Contracting)&#xff0c;在国内广泛地被称为EMC (Energy Management Contracting)&#xff0c;它由专门的节能服务公司(Energy Service Company,ESCO)在为…

STM32F4X SDIO(六) 例程讲解-SD_PowerON

STM32F4X SDIO&#xff08;六&#xff09; 例程讲解-SD_PowerON 例程讲解-SD_PowerONSDIO引脚初始化和时钟初始化SDIO初始化(单线模式)CMD0:GO_IDLE_STATE命令发送程序命令响应程序 CMD8:SEND_IF_CONDCMD8参数命令发送程序命令响应程序 CMD55:APP_CMDCMD55命令参数命令发送命令…

【Acwing170】加成序列(dfs+迭代加深+剪枝)题解和一点感想

本思路来自acwing算法提高课 题目描述 看本文需要准备的知识 1.dfs算法基本思想 2.对剪枝这个词有个简单的认识 迭代加深思想和此题分析 首先&#xff0c;什么是迭代加深呢&#xff1f;当一个问题的解有很大概率出现在递归树很浅的层&#xff0c;但是这个问题的解本身存在…

音视频开发:音频编码原理+采集+编码实战

原理&#xff1a; 消除冗余信息&#xff0c;压缩量最大&#xff0c;也叫有损压缩 剔除人耳听觉范围外的音频信号20Hz以下和20000Hz以上&#xff1b;去除被掩蔽的音频信号&#xff0c;信号的遮蔽可以分为频域遮蔽和时域遮蔽&#xff1b;频域遮蔽效应 屏蔽70分贝以下&#xff0…

汽车标定技术(一):XCP概述

目录 1.汽车标定概述 2.XCP协议由来及版本介绍 3.XCP技术通览 3.1 XCP上下机通信模型 3.2 XCP指令集 3.2.1 XCP帧结构定义 3.2.2 标准指令集 3.2.3 标定指令集 3.2.4 页切换指令集 3.2.5 数据采集指令集 3.2.6 刷写指令集 3.3 ECU描述文件(A2L)概述 3.3.1 标定上位…

有方N58 HTTP POST 请求连接 TDengine

串口调试软件&#xff1a;格西调试精灵 第一步先注册网络获取IP地址 建立PPP连接 ATXIIC1\r PPP链路建立成功&#xff0c;查询IP地址 ATXIIC?\r 设置网络APN ATCREG?\r 运行结果&#xff0c;红线处是获…

算法:Java构建二叉树并迭代实现二叉树的前序、中序、后序遍历

先自定义一下二叉树的类&#xff1a; // Definition for a binary tree node. public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left…