【干货#006】实战知晓云分页显示
2017-11-15 11:25
148 查看
缘起
使用场景是用户下拉页面时,自动加载和显示数据。本例用的是显示一个常用电话列表。
准备
在知晓云后台数据表中增加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"错误
关注晓程序干货店,分享小程序开发干货知识
相关文章推荐
- 【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示
- 【水晶报表实战指南】使用分组实现超多列分段同页及分页显示
- Flex Datagrid 实战 [数据绑定、单击显示、分页]
- 【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。
- 【干货#005】实战知晓云发送模板消息
- springboot干货——(十四【二】)mongodb进行分页显示【含条件查询】
- 一条SQL查询单个数据和多个数据,并能在分页上显示
- Java当中的分页显示公共类
- 关于分页显示的问题
- 【腾讯Bugly干货分享】Android 插件技术实战总结
- oracle入门(8)——实战:支持可变长参数、多种条件、多个参数排序、分页的存储过程查询组件
- springmvc+mybatis+mysql的分页的查询和显示
- ASP.NET基础教程-Repeater控件分页显示数据
- JSP+Javabean+JSTL实现了记录分页显示
- UITableView实现分页显示
- JSP实现添加功能和分页显示实例分析
- Jsp分页显示代码实现 (
- DataList嵌套,分页,点击父DataList标题在子DataList显示相关的内容,点击子DataList标题显示主要内容.
- 【SSH网上商城】分页显示图片
- 实现JSP分页显示数据库