当前位置: 首页 > news >正文

微信小程序上拉加载:onReachBottom详解+设置触发距离

前端经常遇到上拉加载更多的需求,一般还涉及到翻页。小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释:

1、首先在data里定义一下返回数据data,和翻页的页数pagenum

  data: {
    datalist: [], //.wxml文件需要绑定的列表,我这里用的数据类型是数组
    pagenum: 1, //初始页默认值为1
  },

2、具体的请求过程,包含新老数据的数组合并,实现数据实时更新

  getdatalist: function () { //可在onLoad中设置为进入页面默认加载
   var that = this;
    wx.request({
      url: '请求地址',
      data: {
        "key": "某入参value",
        "pageNum": that.data.pagenum, //从数据里获取当前页数
        "pageSize": 10, //每页显示条数
      },
      method: "POST",
      success: function (res) {
        var arr1 = that.data.datalist; //从data获取当前datalist数组
        var arr2 = res.data; //从此次请求返回的数据中获取新数组
        arr1 = arr1.concat(arr2); //合并数组
        that.setData({
          datalist: arr1 //合并后更新datalist
        })
      },
      fail: function (err) { },//请求失败
      complete: function () { }//请求完成后执行的函数
    })
  }

3、翻页时更新页码pagenum+1,并触发新一轮请求,和第2部形成循环。

  onReachBottom: function () { //触底开始下一页
    var that=this;
    var pagenum = that.data.pagenum + 1; //获取当前页数并+1
    that.setData({
      pagenum: pagenum, //更新当前页数
    })
    that.getdatalist();//重新调用请求获取下一页数据
  },

4、如果想要实现无感加载,还可以在.json文件中给onReachBottom()设定触发距离,这样不用拉到最底部就开始触发onReachBottom翻页:
"onReachBottomDistance":300 //可以在当前页也可以全局设置

相关文章:

  • ubuntu 安装配置ssh
  • niucms就是以城市为分割单位,在上面 小区/乡村/同城论坛+58+团购
  • idea tomcat启动时候中文乱码、问号
  • 如何从CRM中获益?看专家怎么说!
  • ECharts初使用,从后台得到数据源
  • linux 使用ssh到远端并且使用while的坑
  • [置顶] 开源史上最成功的8个开源产品
  • 广州大学华软软件学院——NA视频下载
  • Android Studio使用来自控制台的模拟器,/dev/kvm device:
  • 安装win系统报错
  • CentOS6.10下安装mysql-5.7.24
  • php 数组元素 频率 次数
  • python docx文档转html页面
  • 算法60---石子游戏【动态规划】
  • (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
  • [deviceone开发]-do_Webview的基本示例
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • JavaScript 基本功--面试宝典
  • JDK 6和JDK 7中的substring()方法
  • JS数组方法汇总
  • python 学习笔记 - Queue Pipes,进程间通讯
  • uva 10370 Above Average
  • Vue UI框架库开发介绍
  • Vue.js源码(2):初探List Rendering
  • windows下mongoDB的环境配置
  • Zsh 开发指南(第十四篇 文件读写)
  • 关于springcloud Gateway中的限流
  • 回顾 Swift 多平台移植进度 #2
  • 看域名解析域名安全对SEO的影响
  • 那些年我们用过的显示性能指标
  • 前端学习笔记之观察者模式
  • 人脸识别最新开发经验demo
  • 正则与JS中的正则
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • kubernetes资源对象--ingress
  • RDS-Mysql 物理备份恢复到本地数据库上
  • ​比特币大跌的 2 个原因
  • #我与Java虚拟机的故事#连载03:面试过的百度,滴滴,快手都问了这些问题
  • (175)FPGA门控时钟技术
  • (C语言)字符分类函数
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)计算机毕业设计ssm电影分享网站
  • (牛客腾讯思维编程题)编码编码分组打印下标(java 版本+ C版本)
  • (五)IO流之ByteArrayInput/OutputStream
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (已解决)报错:Could not load the Qt platform plugin “xcb“
  • (转)3D模板阴影原理
  • (转)程序员技术练级攻略
  • (转)平衡树
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • .bat文件调用java类的main方法