微信小程序分页加载的实例代码


Posted in Javascript onJuly 11, 2017

整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享。

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。照例先上源码及效果图。

源码传送门

微信小程序分页加载的实例代码

要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条数据,第一次(第一页)请求即开始start为0结束end是9,第二页就是从10到19,以此类推。

既然要实现分页加载功能,最重要就是下拉以及上拉的处理事件,在微信小程序中已经帮我们封装好了上拉以及下拉的触发事件,如下

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },

可能刚接触微信小程序的爱好者,会遇到一个问题,为什么我重写了上拉和下拉函数,但是当我上拉或者下拉的时候函数为什么不回调啊。莫急莫慌,那是因为除了重写这两个函数,我们还需要在json配置文件加入下面代码

{
  "enablePullDownRefresh": true
}

有了上面的代码,我们每次上拉或者下拉就会触发相对应的函数了。

在data中创建数据

data: {
  page: 1,
  pageSize: 30,
  hasMoreData: true,
  contentlist: [],
 },

page即为当前请求数据时第几页,pageSize是每页的数据的大小,hasMoreData用于上拉的时候是不是要继续请求数据,即是不是还有更多数据。当我们网络请求数据成功后,如果请求数据的长度小于pageSize: 30,那么就表示没有更多数据,将hasMoreData更改为false,如果请求的数据长度是30,表示还有更多数据那么hasMoreData久更改为true,并将页数page加1.当下拉的时候讲page先更改为1,然后去查询数据,当查询数据成功时,如果page为1,就将获取的数据直接赋值给contentlist,如果页数大于1的话,就将请求的数据追加在contentlist后面。这样就可以实现分页加载的功能了。

经过上面的分析,我们已经对分页加载的实现有了一个清晰的认识,那么接下来我就介绍代码的实现。

getMusicInfo: function (message) {
  var that = this
  var data = {
   showapi_appid: '25158',
   showapi_sign: 'c0d685445898438f8c12ee8e93c2ee74',
   keyword: '我',
   page: that.data.page
  }
  network.requestLoading('https://route.showapi.com/213-1', data, message, function (res) {
   console.log(res)
   var contentlistTem = that.data.contentlist
   if (res.showapi_res_code == 0) {
    if (that.data.page == 1) {
     contentlistTem = []
    }
    var contentlist = res.showapi_res_body.pagebean.contentlist
    if (contentlist.length < that.data.pageSize) {
     that.setData({
      contentlist: contentlistTem.concat(contentlist),
      hasMoreData: false
     })
    } else {
     that.setData({
      contentlist: contentlistTem.concat(contentlist),
      hasMoreData: true,
      page: that.data.page + 1
     })
    }
   } else {
    wx.showToast({
     title: res.showapi_res_error,
    })
   }

  }, function (res) {
   wx.showToast({
    title: '加载数据失败',
   })

  })
 },

上面函数就是获取音乐列表信息的请求处理逻辑,该函数有一个参数message,它是用来展示加载数据时的提示信息,例如当下拉的时候,提示信息为正在刷新数据,当上拉的时候提示正在加载更多数据。

那么我们当进入页面的时候开始加载一次数据,即在onLoad函数,如下

onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  var that = this
  that.getMusicInfo('正在加载数据...')
 },

然后上拉和下拉函数的实现如下

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
  this.data.page = 1
  this.getMusicInfo('正在刷新数据')
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
  if (this.data.hasMoreData) {
   this.getMusicInfo('加载更多数据')
  } else {
   wx.showToast({
    title: '没有更多数据',
   })
  }
 },

  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 #Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 #Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 #Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 #Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 #Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php数组添加元素方法小结
2014/12/20 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
iView框架问题整理小结
2018/10/16 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
python 上下文管理器使用方法小结
2017/10/10 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python如何输出整数
2020/06/07 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
英语自荐信常用语句
2013/12/13 职场文书
同学会邀请书大全
2014/01/12 职场文书
大学活动总结格式
2014/04/29 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android