UniApp__微信小程序项目实战 实现长列表分页,通过 onReachBottom 方法上划分次加载数据

UniApp 实现长列表分页,通过 onReachBottom 方法上划分次加载数据

项目实战中比较常见,方便下次使用

文章目录

              一、应用场景?
              二、作用

              三、使用步骤?
          3.1 实现的整体思路?
          3.2 需要的字段?
          3.3 全部代码
              四、注意事项?

一、应用场景

假如后端给你返回几百上千条数据,一次性加载出来势必加载时间过长,影响性能和用户体验。所以得使用分页加载,第一次加载你在手机可视区域的数据,往下滑动的时候,逐步加载另一部分数据,直到数据加载完成。注意!!!这也是面试经常问到的一道面试题

二、作用?

1、 提升加载速度和性能:
一次性加载大量数据会增加服务器响应时间和客户端渲染时间,导致应用变慢。分页加载可以将数据分批次加载,显著提升加载速度和性能。
2、 减少内存占用:
分页加载只会在用户需要时加载下一页的数据,而不是一次性加载所有数据,减少了应用的内存占用,从而提高应用的稳定性。
3、提升用户体验:
用户在滚动页面时,数据逐步加载,用户感知到的数据加载时间变短,应用响应更加灵敏,提升用户体验。
4、优化网络请求:
分批次加载数据,可以避免一次性发出大量请求,减轻服务器压力,同时也能更好地处理网络波动带来的问题。

三、使用步骤?

3.1 实现的整体思路?

首先初始化数据在 data 中定义列表数据、分页参数和加载状态、编写一个方法来获取数据,并在其中处理分页逻辑(就是给你返回一个整体的数据长度做对比要是等于这个长度就加载完成了)。最后在 onReachBottom 生命周期方法中调用获取数据的方法,就是实现分页的效果。onReachBottom ()触底事件,向下滑动的时候触发这个事件。

3.2 全部代码以及步骤

1、首先data里面定义数据、page就是页数,pagesize就是每页展示的数据、loading就是控制加载动画啥时候展示

data() {return {list: [], // 列表数据page: 1, // 当前页码pageSize: 10, // 每页条数status : false, // 加载状态noMore: false // 是否还有更多数据};
}

2、首先应该是请求接口拿到数据,因为那你每次拿到的是十几条数据,向下加载的话继续要加在数组里面,newUsers返回的就是在之前数组里面没有的新数据,相当于一个去重操作。然后做个判断Ext这个是返回的总条数.

		const newUsers = res.Result.filter(user => !this.oldList.some(existingUser => existingUser.id === user.id));this.oldList.push(...newUsers)if (this.oldList.length >= res.Ext) {this.status = "nomore";// this.show = false}

3、触底加载的生命周期用于向下滑动的时候加载数据,每次滑动一下this.page++;页码增加this.livetoday()获取数据,直到达到总条数if (this.status == ‘nomore’) {return}有这个标识的时候就加载结束。

		onReachBottom(e) {this.page++;if (this.status == 'nomore') {console.log(123456);return}console.log(this.page);this.show = truethis.livetoday()},

四、注意事项?

if (this.oldList.length >= res.Ext) { this.status = "nomore"; // this.show = false }这个判断就是在this.oldList.push(…newUsers)之后加一下,不然触底加载的时候还要多请求一下。

const newUsers = res.Result.filter(user => !this.oldList.some(existingUser => existingUser.id === user.id));this.oldList.push(...newUsers)if (this.oldList.length >= res.Ext) {this.status = "nomore";// this.show = false}

去重那个还有方法

// 将 this.oldList 中的用户 ID 存储在 Set 中
const oldUserIds = new Set(this.oldList.map(existingUser => existingUser.id));// 使用 filter 方法筛选出 res.Result 中不在 oldUserIds 中的用户
const newUsers = res.Result.filter(user => !oldUserIds.has(user.id));// 现在 newUsers 包含所有不在 this.oldList 中的用户

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

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

相关文章

基于python深度学习遥感影像地物分类与目标识别、分割实践技术应用

目录 专题一、深度学习发展与机器学习 专题二、深度卷积网络基本原理 专题三、TensorFlow与Keras介绍与入门 专题四、PyTorch介绍与入门 专题五、卷积神经网络实践与遥感图像场景分类 专题六、深度学习与遥感图像检测 专题七、遥感图像检测案例 专题八、深度学习与遥感…

字节码编程之bytebuddy结合javaagent支持多种监控方式

写在前面 打印方法执行耗时是监控,获取程序运行的JVM信息是监控,链路追踪也是监控。 本文看下如何实现一个通用的监控解决方案。 1:程序 定义premain: package com.dahuyou.multi.monitor;import com.dahuyou.multi.monitor.…

安卓逆向入门(3)------Frida基础

安装frida pip install frida pip install frida-tools //验证安装成功 frida --versionfrida连接手机 1、Android(已ROOT) frida-server 参考:https://www.jianshu.com/p/c349471bdef7 2、Android(非ROOT) pip3 in…

智能门锁的工作原理

智能门锁的工作原理是一个复杂而精密的过程,它结合了物联网、密码学、身份认证和通信技术等多个领域的先进技术。以下是智能门锁工作原理的详细解析: 一、身份认证 智能门锁通过身份认证机制来确保只有授权的用户才能开启门锁。常见的身份认证方式包括…

数据库内核研发学习之路(五)创建postgres系统表

写在前面 在使用postgres的时候,有很多表是我们一开始安装好数据库就存在的,这些表称为系统表,他们记载一些数据库信息,比如我们做运维工作常用的pg_stat_activity;我们在数据库中查询这张表可以发现他存储了一些数据库连接信息。…

多租户架构的艺术:在SQL Server中实现数据库的多租户

多租户架构的艺术:在SQL Server中实现数据库的多租户 在云计算和SaaS(软件即服务)时代,多租户架构(Multi-Tenancy)成为了数据库设计中的一个关键概念。它允许多个租户(客户)共享相同…

初等数论精解【2】

文章目录 素数基础素数理论互素定义性质应用示例最大公约数方法一:欧几里得算法方法二:列举法(适用于较小的数)欧几里得算法编程实现扩展欧几里得算法概述算法背景算法原理算法步骤应用场景示例代码 结论素数分布素数概述一、定义…

GO:Socket编程

目录 一、TCP/IP协议族和四层模型概述 1.1 互联网协议族(TCP/IP) 1.2 TCP/IP四层模型 1. 网络访问层(Network Access Layer) 2. 网络层(Internet Layer) 3. 传输层(Transport Layer&#…

WPF+Mvvm 项目入门完整教程(一)

WPF+Mvvm 入门完整教程一 创建项目MvvmLight框架安装完善整个项目的目录结构创建自定义的字体资源下载更新和使用字体资源创建项目 打开VS2022,点击创建新项目,选择**WPF应用(.NET Framework)** 创建一个名称为 CommonProject_DeskTop 的项目,如下图所示:MvvmLight框架安装…

机器学习-19-基于交互式web应用框架streamlit和gradio转化数据和机器学习模型

参考Streamlit:简单快速的Python Web应用开发工具 参考Python(Web时代)—— 超简单:一行代码就能搭建网站 参考对比Streamlit和Gradio:选择最适合你的Python交互式应用框架 参考Gradio:构建交互式界面的简单而强大的Python库 参考【吴恩达 X HuggingFace】使用Gradio快速…

【JavaScript 算法】双指针法:高效处理数组问题

🔥 个人主页:空白诗 文章目录 一、算法原理二、算法实现示例问题1:两数之和 II - 输入有序数组示例问题2:反转字符串中的元音字母注释说明: 三、应用场景四、总结 双指针法(Two Pointer Technique&#xff…

sqlalchemy_dm

1、参考文档: https://blog.csdn.net/njcwwddcz/article/details/126554118 https://eco.dameng.com/document/dm/zh-cn/pm/dmpython-dialect-package.html 2、生成工具 sqlalchemy2.0.0.zip 3、安装步骤 conda create --name kes --clone kes1 rz unzip sql…

高等数学用到的初等数学

指数 同指不同底乘法 (ab)xaxbx

如何做到高级Kotlin强化实战?(三)

高级Kotlin强化实战(二) 2.13 constructor 构造器2.14 Get Set 构造器2.15 操作符2.16 换行 2.13 constructor 构造器 //Java public class Utils { private Utils() {} public static int getScore(int value) { return 2 * value;} }//Kotlin class U…

深入理解Java并发线程阻塞唤醒类LockSupport

LockSupprot 用来阻塞和唤醒线程,底层实现依赖于Unsafe类 该类包含一组用于阻塞和唤醒线程的静态方法,这些方法主要是围绕 park 和 unpark 展开 public class LockSupportDemo1 {public static void main(String[] args) {Thread mainThread Thread.cu…

实时吸烟检测系统:基于深度学习与YOLO模型的完整实现

引言 在公共场所吸烟不仅有害吸烟者的健康,也会影响到周围的人。为了更好地管理和监控公共场所的吸烟行为,本文介绍了一种基于深度学习的吸烟检测系统。该系统包含一个用户界面,利用YOLO(You Only Look Once)v8/v7/v6…

微信小程序(百战商城)的实战项目的首页的制作及讲解

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

【人工智能】基于香橙派AIpro和昇腾AI计算芯片的面部口罩检测(详细教程)

目录 前言 1.介绍开发板 2.应用场景 3.安装操作系统 3.1 下载工具 3.2 烧录系统 3.3 系统装载 4.配置操作系统 4.1 登录系统账户 4.2 配置网络连接 4.3 查看设备网络 4.4 配置远程连接 5.部署目标检测应用 5.1 准备运行环境 5.2 模型二次训练 ​5.3 热成像温度…

JavaScript 异步编程:提升现代Web应用的性能与体验

异步概念解析 在编程领域,异步(Asynchronous)是一种允许程序继续执行而不等待某个操作完成的机制,与之相反的是同步(Synchronous),其中程序会暂停并等待每个操作完成才继续下一步。异步编程的核…

数据结构 day4

目录 思维导图: 学习内容: 1. 链表的引入 1.1 顺序表的优缺点 1.1.1 优点 1.1.2 不足 1.1.3 缺点 1.2 链表的概念 1.2.1 链式存储的线性表叫做链表 1.2.2 链表的基础概念 1.3 链表的分类 2. 单向链表 2.1 节点结构体类型 2.2 创建链表 2.…