关闭

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

标签: ui小程序微信移动后端
80人阅读 评论(0) 收藏 举报
分类:

缘起

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



准备

在知晓云后台数据表中增加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"错误


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



0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

百度网盘2T学习资源分享干货满满

所有的资源都是本人亲自打包,整理发送的,资源都是打包的,包括很多内容,来源包括通过网上支付获得,或者是好友分享,特在此分享给那些想奋斗或是正在奋斗中的人,希望能帮到你们http://pan.baidu...
  • chandddlleerr
  • chandddlleerr
  • 2017-06-08 18:19
  • 1398

回溯法-旅行售货员问题(C语言)

1、旅行员售货问题     问题描述      某售货员要到若干城市去推销商品,已知各城市之间的路程(旅费),他要选定一条从驻地出发,经过每个城市一遍,最后回到驻地的路线,使总的路程(总旅费)最小...
  • baidu_20363843
  • baidu_20363843
  • 2015-11-17 19:40
  • 2505

许晓斌_Maven实战(一)——坐标规划

from:http://www.infoq.com/cn/news/2010/12/xxb-maven-1 坐标是什么?为什么要规划? 坐标是Maven最基本的概念,它就像每个构件...
  • moonsheep_liu
  • moonsheep_liu
  • 2015-01-19 09:27
  • 4583

【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示

前面一节 我们已经实现博客类别的dao层的实现,其中特别讲解了博客类别的分页的实现,那么现在我们实现了后台的分页,那么前台分页怎么显示呢,这时候我们用到了easyui的datagrid了。 先上一下...
  • xp541130126
  • xp541130126
  • 2017-04-17 20:33
  • 1726

【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。

前言 我在这里给大家道个歉,楼主因为毕业季拍毕业照 找工作事情比较多,所以博客实战给拉下来了,对不起大家,这只是暂时的拉下,楼主是不会放弃的。 1、上篇回顾在上一节中我们是完成了博客的回台部分,现...
  • xp541130126
  • xp541130126
  • 2017-05-16 08:43
  • 2283

【干货#008】30分钟实战知晓云内容发布小程序

缘起 知晓云的特色之一就是内置可视化内容管理,简单易用的富文本编辑、管理功能,配合 SDK 内置的微信小程序富文本渲染引擎wxParser轻松完成内容发布小程序的制作。 下...
  • mingciong
  • mingciong
  • 2017-11-15 11:29
  • 136

【干货#005】实战知晓云发送模板消息

缘起 使用场景是在用户完成付款后通过模板消息向用户发送付款成功消息。 准备 发送模板消息首先要在小程序后台申请模板,微信提供了模板库供开发者选...
  • mingciong
  • mingciong
  • 2017-11-15 11:21
  • 145

java分页显示

  • 6天前 19:32
  • 2KB
  • 下载

struts2实现登陆注册+服务器校验+上传下载+简单的留言讨论区+分页显示

  • 2015-12-17 22:16
  • 5.26MB
  • 下载

老二牛车教育NET程序员面试题之DataList分页显示

  • 2014-10-05 10:43
  • 125KB
  • 下载
    个人资料
    • 访问:2197次
    • 积分:183
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档