小程序实现滚动加载（懒加载）

前言

小程序是一项很受欢迎的技术，随着其能力的不断增强，越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时，该如何处理呢，显然一次性全部加载完，会非常消耗性能的，为了解决这些问题从而出现了一种叫滚动加载的数据处理方式，也被称为“无限滚动”或“懒加载”，它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中，我们将讨论如何在小程序中实现滚动加载。

思路

要实现滚动加载，我们需要做以下几个步骤：

1. 监听页面的滚动事件

2. 判断滚动距离和页面高度是否触发加载更多数据的条件

3. 加载并渲染更多数据

首先，我们需要对页面滚动事件进行监听。

// 在 Page 中添加以下代码来监听页面滚动事件Page({onReachBottom:function(){// 触发加载更多数据}});

onReachBottom

是小程序的内置事件，当页面的内容滚动到底部时会触发这个事件。

接下来，我们需要判断何时到达加载更多数据的条件。

// 在 Page 中添加以下代码来判断是否需要加载更多数据Page({data:{hasMoreData:true,// 是否还有更多数据loading:false,// 是否正在加载数据},onReachBottom:function(){if(!this.data.hasMoreData ||this.data.loading){// 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回return;}// 触发加载更多数据this.loadMoreData();},loadMoreData:function(){// 标记正在加载数据this.setData({loading:true});// TODO 加载并渲染更多数据// 标记加载数据完成this.setData({loading:false});}});

我们在 Page 数据中定义了两个变量：

hasMoreData

和

loading

。

hasMoreData

表示是否还有更多数据，初值为 true。

loading

表示是否正在加载数据，初值为 false。

当滚动到底部触发

onReachBottom

事件时，我们首先判断是否还有更多数据需要加载，如果没有了就不需要继续加载；同时，如果正在加载数据，则也不需要再次加载，因为数据正在加载中。

如果需要加载更多数据，则调用

loadMoreData

函数，其中需要我们编写加载数据的代码。

我们来看如何实现加载数据的代码。

// 在 Page 中添加以下代码来加载并渲染更多数据Page({data:{hasMoreData:true,// 是否还有更多数据loading:false,// 是否正在加载数据dataList:[],// 所有数据列表},onReachBottom:function(){if(!this.data.hasMoreData ||this.data.loading){// 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回return;}// 触发加载更多数据this.loadMoreData();},loadMoreData:function(){// 标记正在加载数据this.setData({loading:true});// 加载数据let newPostList =loadNextPostList();// 如果没有新的数据了，更改 hasMoreData 为 falseif(newPostList.length ==0){this.setData({hasMoreData:false});}else{// 如果有新的数据，则将新数据加入到原数据列表的末尾，同时也要更新 dataListlet oldPostList =this.data.dataList ||[];let dataList = oldPostList.concat(newPostList);this.setData({dataList: dataList
      });}// 标记加载数据完成this.setData({loading:false});}});// 注意在上述代码定义了一个 loadNextPostList 函数，这个函数负责加载新的数据。

以上代码中的

loadNextPostList

方法是一个模拟数据加载的函数，并不是实际场景中可用的代码。
我们在

loadMoreData

方法中，标记 “正在加载数据”，然后调用

loadNextPostList

加载数据。如果加载结束后返回的数据为空，则表示没有更多的数据了，我们将设置

hasMoreData

为 false，告诉滚动加载的方法不需要再继续调用加载新数据的方法。
如果有新数据，将其合并到原数据中，并将合并后的列表更新到 data 中，同时重新设置 “加载数据完成” 的 flag，告诉滚动加载方法可以继续开始新的加载。
至此，我们已经实现了滚动加载的功能。

完整代码示例：

// index.jsPage({data:{dataList:[],loading:false,hasMoreData:true,},// 监听滚动到底部的事件onReachBottom:function(){if(!this.data.hasMoreData ||this.data.loading){return;}this.loadMoreData();},// 加载更多数据loadMoreData:function(){this.setData({loading:true});let newData =this.loadNextData();if(newData.length ==0){this.setData({hasMoreData:false});}else{let oldData =this.data.dataList;let newDataList = oldData.concat(newData);this.setData({dataList: newDataList
      });}this.setData({loading:false})},// 模拟加载新数据的函数loadNextData:function(){let data =[];for(let i =0; i <10; i++){
      data.push({id:this.data.dataList.length + i +1,name:"Name "+(this.data.dataList.length + i +1),});}return data;},});

当

loadNextData

加载数据之后,请求数据为空即页面新数据和之前数据长度一致的话，就可以判定为已经加载完全部数据，为了更好的用户体验，我们还需要在页面上添加loading动画提示，告诉用户正在加载数据，避免用户等待过程中出现不良的体验效果，也可以结合scroll-view使代码逻辑更简单。