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


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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
JS如何监听div的resize事件详解
Dec 03 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
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
自学python用什么系统好
2020/06/23 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
3分钟演讲稿
2014/04/30 职场文书
授权收款委托书范本
2014/10/10 职场文书
消费者投诉书范文
2015/07/02 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
vue实力踩坑之push当前页无效
2022/04/10 Vue.js