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 中的用户
相关推荐
融化的雪7 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
豐儀麟阁贵15 分钟前
2.6 代码注释与编码规
java·开发语言
egoist202318 分钟前
[linux仓库]信号保存[进程信号·肆]
linux·开发语言·信号集·信号保存·sigpending
Gazer_S19 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多19 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
你不是我我24 分钟前
【Java 开发日记】什么是线程池?它的工作原理?
java·开发语言
我血条子呢25 分钟前
[HTML]播放wav格式音频
前端·html·音视频
成子不是橙子26 分钟前
Langchain | Ollama | Python快速上手使用LLM的DEMO
开发语言·python·langchain·ollama
2501_9160074732 分钟前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
android·macos·ios·小程序·uni-app·cocoa·iphone
梵得儿SHI40 分钟前
Java 反射机制深度解析:从运行时 “解剖” 类的底层逻辑
java·开发语言·反射·反射机制·private·类成员·反射的三大核心功能