个人做网站 私活,网站流量,app大全免费软件下载安装,wordpress软件站UniApp 实现长列表分页#xff0c;通过 onReachBottom 方法上划分次加载数据 项目实战中比较常见#xff0c;方便下次使用 文章目录 一、应用场景? 二、作用 三、使用步骤#xff1f; 3.1 实现的整体思路#xff1f; …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 中的用户
