用云开发数据库实现列表触底自动加载功能丨云开发101

本文主要是介绍用云开发数据库实现列表触底自动加载功能丨云开发101，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

云开发数据库之触底自动加载

在前面的两篇文章中，我们简单的谈了谈云开发数据库与传统数据库的差异，以及云开发数据库中的权限机制，今天我们来分享一些实用的代码，快速帮助大家完成自己的小程序的部分功能。

在开发小程序类信息流类型的应用时，我们经常会有一个需求，就是当用户将列表滑动到列表的底部时，自动加载新的数据中，从而实现无限下拉，获得一个更好的体验。

大部分用户在进行传统应用开发时，能够实现类似的功能，但在进行云开发相关的开发时，就迷茫了。在云开发中，同样可以实现类似的功能，这一部分，我们就来看一看这部分的实现细节。

在小程序中，触底自动加载的功能是基于页面的 onReachBottom 事件完成的，当触发此生命周期函数时，则说明小程序已经滑动到页面的底部，需要进行数据的加载。

在使用云开发进行数据加载时，我们可以通过在数据库查询语句中加入 skip(20) 来完成跳过所查询数据的前 20 条，从第 21 条开始查询，这样就得出了第二次加载的数据。

这里的 20 是因为云开发数据库 API 单次只能加载 20 条数据，如果你希望其每次只加载10条，可以在代码中加入一个 limit(10) 来实现

因此，如果实现页面的触底自动加载的功能，只需要在页面的 onReachBottom 中使用 skip 进行数据查询，并将该数据附加到原有的数据中，即可完成数据的触底自动加载功能。

首先，我们需要在 Page 实例中定义 onReachBottom 事件，并定义一个 loadData 函数，用于数据加载，后续，我们可以在 onLoad 和 onReachBottom 中调用 loadData 函数。

Page({data:{items:[] // 用于放置数据的数组。},onLoad:function(opt){// 页面加载完成后，调用此函数},onReachBottom:function(){// 页面滑动触底后，调用此函数},loadData:function(){// 加载数据

这篇关于用云开发数据库实现列表触底自动加载功能丨云开发101的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！