【干货#006】实战知晓云分页显示

缘起

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

准备

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

实现

第1步 配置界面

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

第2步 定义变量

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

第3步 页面加载

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

第4步 触底加载

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

注意

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

更多实战干货，可查看：

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI

更多常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误

关注晓程序干货店，分享小程序开发干货知识