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

缘起

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



准备

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



实现

第1步 配置界面


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



第2步 定义变量


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



第3步 页面加载


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



第4步 触底加载


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



注意

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


更多实战干货,可查看:

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

细解小程序自适应单位rpx

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

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

小程序使用有赞ZanUI


更多常见错误,可查看:

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

解决"Failed to load image"错误


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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值