携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天,点击查看活动详情 >>

前言

在我们开发过程中一定会遇到需要分页的情况，在web系统中，我们通常新增一个分页组件，让用户点击下一页 与上一页进行分页。在微信小程序中我们有一个更简单的分页方式。那就是触底分页，当然web也可以实现触底分页。

实现

微信小程序为我们提供了很多的原生方法，其中onReachBottom方法就是检测触底方法，我们只需要在js中编写此方法且在此方法中将页数+1请求后台，当拿到返回数据后需要再将返回的数据追加回这个列表

onReachBottom: function () {
    console.log("触底")
    var _this = this;
    //当前页数+1
    var current = _this.data.current + 1
    //组装请求后台的json  需要当前页和一页几个数据
    const data = {
      "current": current,
      "size": _this.data.size
    }
    _this.setData({
        current: current,
    })
    //判断当前页是否是最后一页，如果不是则执行，如果已是最后一页则跳出不执行。
    if (current <= _this.data.totalPage) {
      wx.showLoading({
        title: '加载中',
      })
      // 请求后台，获取下一页的数据。
      getList(data).then((res) => {
        console.log('server Resp', res)
        if (res.statusCode == 200) {
            _this.setData({
                list : _this.data.list.concat(res.data.result.records),
            })
          console.log(_this.data.carlist );
        } else {
          console.log("111");
        }
      })  
    }else{
        _this.setData({
            hiddenstate:false
        })
    }
 
  },

当拿到后台返回数据后使用_this.data.list.concat(后台的数据)将后台数据追加到列表上。

触底分页方法不生效几种可能

js文件中有多个onReachBottom方法

我们js文件中不能有同名的方法，有时使用微信模板已经自带onReachBottom方法了，我们又重新写了一个同样的方法，小程序只找到了自己的方法（应该是从上到下加载的）此时我们只需要删除重复的方法即可

配置属性问题

设置页面高度为100%

page{ height: 100% }

size值问题

还有一种可能是因为有的手机较长，导致size小了一页直接渲染完成，就无法触发底部的触底事件了

小程序自带问题

微信开发者工具问题，尝试清空全部缓存，有时候热加载不是很好用，导致没有加载上。