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

标签: ui 小程序 微信 移动 后端
136人阅读 评论(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"错误


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



查看评论

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

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

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

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

机器学习基础算法之随机森林

英文原文《The Random Forest Algorithm》专知 编译《机器学习基础算法之随机森林》【导读】在当今深度学习如此火热的背景下,其他基础的机器学习算法显得黯然失色,但是我们不得不承认...
  • tz_zs
  • tz_zs
  • 2018-03-08 19:34:31
  • 51

实战无线通信应知应会

  • 2015年09月15日 21:46
  • 55MB
  • 下载

Dubbo的分布式系统架构实战视频干货

  • 2018年02月08日 14:27
  • 49B
  • 下载

实战无线通信应知应会——新手入门,老手温故.pdf

  • 2011年05月15日 15:32
  • 3.67MB
  • 下载

实战无线通信应知应会 2

  • 2015年09月15日 23:11
  • 38.86MB
  • 下载

实战无线通信应知应会6

  • 2012年02月25日 20:03
  • 15.07MB
  • 下载

实战无线通信应知应会5

  • 2012年02月25日 20:02
  • 9.93MB
  • 下载

实战无线通信应知应会3

  • 2012年02月25日 20:00
  • 15.43MB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 7250
    积分: 232
    排名: 32万+
    文章存档