当前位置: 首页 > 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()}}}
http://www.lryc.cn/news/217148.html

相关文章:

  • 遗憾
  • hustoj 平台
  • 如何使用Scrapy提取和处理数据
  • 拟合与过拟合
  • 科学化决策数据分析,先从量化开始
  • 使用Docker搭建一个“一主两从”的 Redis 集群(超详细步骤)
  • 阿里云盘第三方linux客户端“小白羊”云盘“Aria2本地连接已断开”错误的解决方法
  • Linux flock和fcntl函数详解
  • React 组件点击事件
  • Windows 下编译 TensorFlow 2.9.1 CC库
  • Databricks 入门之连接外部数据库
  • 家庭互动新维度:TikTok的亲子体验
  • redis教程 一 redis中的常用命令
  • 【第28例】IPD体系进阶 | 需求管理:需求实现过程
  • 聊聊我对AI Agents技术的一些看法
  • 32 mysql in 的实现
  • Qt QtCreator添加自定义注释
  • docker 各种命令
  • 【优选算法系列】【专题五位运算】第一节.常见的位运算(面试题 01.01. 判定字符是否唯一和268. 丢失的数字)
  • 学习笔记二十八:K8S控制器Daemonset入门到企业实战应用
  • 您对互联网有多“上瘾”?
  • 数据挖掘题目:设ε= 2倍的格网间距,MinPts = 6, 采用基于1-范数距离的DBSCAN算法对下图中的实心格网点进行聚类,并给出聚类结果(代码解答)
  • STM32HAL-完全解耦面向对象思维的架构-时间轮片法使用(timeslice)
  • C++ 程序员入门需要多久,怎样才能学好?
  • SpringBoot项目打war包部署到tomcat访问路径去掉项目名
  • 58同城面试
  • 【数据结构】归并排序 的递归实现与非递归实现
  • Go的命令行工具开发:使用Cobra库
  • 坚持#第420天~阿里云轻量服务器内存受AliYunDunMonito影响占用解决方法
  • 时间序列聚类的直观方法