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

原理

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

实现步骤

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

"onReachBottomDistance": 20
1

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

// 获取列表数据
    getData() {
      ...
    },
1
2
3
4

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

（3）定义滚动事件

  onReachBottom() {
        if (this.data.pageNum < this.data.totalPage) {
            this.setData({ pageNum: this.data.pageNum + 1 })
            this.getData()
        }
    },
1
2
3
4
5
6

（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
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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