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就是控制加载动画啥时间展示

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

复制代码

  2、起首应该是哀求接口拿到数据，由于那你每次拿到的是十几条数据，向下加载的话继续要加在数组内里，newUsers返回的就是在之前数组内里没有的新数据，相称于一个去重使用。然后做个判断Ext这个是返回的总条数.

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

复制代码

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

1.                 onReachBottom(e) {
2.                         this.page++;
3.                         if (this.status == 'nomore') {
4.                                 console.log(123456);
6.                                 return
7.                         }
8.                         console.log(this.page);
9.                         this.show = true
10.                         this.livetoday()
11.                 },

复制代码

四、留意事项？

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

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

复制代码

  去重谁人尚有方法

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

复制代码