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

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

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

文章目录

一、应用场景?

二、作用

三、使用步骤?

[3.1 实现的整体思路?](#3.1 实现的整体思路?)

[3.2 需要的字段?](#3.2 需要的字段?)

[3.3 全部代码](#3.3 全部代码)

四、注意事项?

一、应用场景

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

二、作用?

1、 提升加载速度和性能:

一次性加载大量数据会增加服务器响应时间和客户端渲染时间,导致应用变慢。分页加载可以将数据分批次加载,显著提升加载速度和性能。

2、 减少内存占用:

分页加载只会在用户需要时加载下一页的数据,而不是一次性加载所有数据,减少了应用的内存占用,从而提高应用的稳定性。

3、提升用户体验:

用户在滚动页面时,数据逐步加载,用户感知到的数据加载时间变短,应用响应更加灵敏,提升用户体验。

4、优化网络请求:

分批次加载数据,可以避免一次性发出大量请求,减轻服务器压力,同时也能更好地处理网络波动带来的问题。

三、使用步骤?
3.1 实现的整体思路?

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

3.2 全部代码以及步骤

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

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

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

javascript 复制代码
		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}有这个标识的时候就加载结束。

javascript 复制代码
		onReachBottom(e) {
			this.page++;
			if (this.status == 'nomore') {
				console.log(123456);

				return
			}
			console.log(this.page);
			this.show = true
			this.livetoday()
		},
四、注意事项?

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

javascript 复制代码
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
						}

去重那个还有方法

javascript 复制代码
// 将 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 中的用户
相关推荐
Myli_ing2 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
在下不上天4 分钟前
Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复
大数据·开发语言·python
陌小呆^O^18 分钟前
Cmakelist.txt之win-c-udp-client
c语言·开发语言·udp
dr李四维19 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_33 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~40 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
重生之我是数学王子43 分钟前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
℘团子এ44 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
Ai 编码助手1 小时前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript