当前位置：首页 > news >正文

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

news 2025/7/8 18:25:33

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 中的用户