天天看点

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。

老规矩,先看效果图

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。

本节知识点

1,小程序分页加载

2,小程序列表显示

3,云数据库的使用

4,云数据库分页请求数据的实现

一,先定义数据

我们做分页数据加载,肯定要先准备好数据,数据已经给大家准备好,如下图,文章末尾会贴出数据源和本节课源码的下载地址。

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

然后把数据导入到我们的云开发的数据库里,关于数据如何导入,这里不再讲解,不知道的同学,请看下面这篇文章。或者去老师历史文章里找一下。

《小程序云开发入门---云数据库数据源的导入与导出》

下面给大家看下我们的数据源,长什么样。其实很简单,就是简单的定义21条数据。

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

然后在看导入到数据库的样子。

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

二,分页请求数据

我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。

首先我们这里用到了小程序云开发数据库的知识点

1,get方法:获取云数据库数据

2,skip方法:跳过前面几条数据,请求后面的数据

3,limit方法:请求多少条数据。

比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。

下面把我们index.js的完整代码贴给大家。

上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码

1,我们首先进页面时会请求前10条内容

2,10条内容请求成功以后,我们会把请求到的内容加入datalist数组,然后把datalist里的数据显示到页面上。并将currentpage加一,用于请求第二页数据。

3,当用户滑动到底部时,会触发onreachbottom事件,在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentpage加1,这里要记住一定,一定要请求成功以后才将currentpage +1。

三,列表布局和样式

其实index.wxml和index.wxss的代码很简单,给大家把代码贴出来。

1,index.wxml

2,index.wxss

到这里我们就完整的实现里分页加载功能了。

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

源码已经给大家放到网盘里了,有需要的同学请在文章底部留言,或者私信老师。