本文共 1548 字，大约阅读时间需要 5 分钟。

原理

利用小程序的触底加载事件 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        })    }

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

转载地址：http://bovii.baihongyu.com/