实战知晓云分页显示

缘起

使用场景是用户下拉页面时,自动加载和显示数据。本例用的是显示一个常用电话列表。

实战知晓云分页显示_第1张图片

准备

在知晓云后台数据表中增加Phone表,添加title和tel字段,并添加15条以上数据,以作为测试时使用。

实战知晓云分页显示_第2张图片

实现

第1步 配置界面

使用WEUI样式配置电话列表界面,在数据加载时显示加载提示,在数据全部加载后,显示没有更多提示。

实战知晓云分页显示_第3张图片

第2步 定义变量

分页显示使用limit方法来限制查询结果的数据条数来进行分页,因此需要先定义4个变量,LIMIT和offsetRange用于查询,LIMIT为5表示每次加载5个数据,offsetRange表示已经加载的数据数量,也即数据查询时需要跳过多少数据,isLoading和isReachEnd用于控制显示。

实战知晓云分页显示_第4张图片

第3步 页面加载

初始加载数据时,可以显示比较多的数据,本例中为10(知晓云默认limit为20)。

实战知晓云分页显示_第5张图片

第4步 触底加载

在小程序的页面上拉触底事件处理函数中,使用limit和offset来控制加载数据,将获得的数据使用concat方法添加到数组phoneList中,以达到连续显示的效果。

实战知晓云分页显示_第6张图片

注意

动态加载时limit不宜设得太小,这样频繁加载,体验不佳,也不宜设得太大,这样在网络条件不好时,数据加载缓慢,性能不佳。个人经验,数据设为可以显示半屏幕数据即可。

关注晓杂货店公众号,分享小程序开发知识

实战知晓云分页显示_第7张图片

你可能感兴趣的:(实战知晓云分页显示)