小程序实现列表无限滚动加载的详细步骤

原理

利用小程序的触底加载事件 onReachBottom，当页面滚动到底部的时候给当前页 + 1。

实现步骤

（1）在 json 页面中配置到底部的距离：

"onReachBottomDistance": 20

（2）定义 getData 方法， 在 onLoad 进入页面时加载初始化数据

// 获取列表数据
    getData() {
      ...
    },

onLoad: function(options) {
        this.getData();
}

（3）定义滚动事件

  onReachBottom() {
        if (this.data.pageNum < this.data.totalPage) {
            this.setData({ pageNum: this.data.pageNum + 1 })
            this.getData()
        }
    },

（4）重要部分：当数据请求成功时，如何进行分页请求

// 成功
    success(e) {
        const listData = e.detail.list

        if (listData.length == 0) {
            this.setData({
                listData: [],
                loadText: '抱歉，暂无相关数据'
            })
        } else if (e.detail.currentPage == 1) {
            this.setData({ listData: listData })
        } else if (e.detail.currentPage < e.detail.totalPage && e.detail.totalPage !== 1) {
            this.setData({
                listData: this.data.listData.concat(listData),
                loadText: '数据加载中...'
            })
        } else if (e.detail.currentPage = e.detail.totalPage && e.detail.currentPage !== 1) {
            this.setData({
                listData: this.data.listData.concat(listData),
                loadText: '已全部加载完成'
            })
        } else {
            this.setData({
                listData: listData,
                loadText: '已全部加载完成'
            })

        }
        this.setData({
            totalPage: e.detail.totalPage,
            totalNum: e.detail.totalNum
        })
    }

代码为实际项目粘贴，如有不明确的地方可以具体聊。