微信小程序分页加载数据～上拉加载更多～小程序云数据库的分页加载_小程序上滑加载分页

然后在看导入到数据库的样子。

二，分页请求数据

============

我们第一步准备好了数据以后，接下来就来讲讲如何在js里做分页加载数据。

首先我们这里用到了小程序云开发数据库的知识点

• 1，get方法：获取云数据库数据

• 2，skip方法：跳过前面几条数据，请求后面的数据

• 3，limit方法：请求多少条数据。

比如下面这段代码,就是跳过前5条，请求从第6条开始往后的10条数据，就是请求6～15的数据，我们做分页加载也就是基于这个原理。

 wx.cloud.database().collection("list")

      .skip(5) //从第几个数据开始

      .limit(10)



1
2
3
4
5
6
7
8
9

下面把我们index.js的完整代码贴给大家。

let currentPage = 0 // 当前第几页,0代表第一页 

let pageSize = 10 //每页显示多少数据 

Page({

  data: {

    dataList: [], //放置返回数据的数组  

    loadMore: false, //"上拉加载"的变量，默认false，隐藏  

    loadAll: false //“没有数据”的变量，默认false，隐藏  

  },

  //页面显示的事件

  onShow() {

    this.getData()

  },

  //页面上拉触底事件的处理函数

  onReachBottom: function() {

    console.log("上拉触底事件")

    let that = this

    if (!that.data.loadMore) {

      that.setData({

        loadMore: true, //加载中  

        loadAll: false //是否加载完所有数据

      });

      //加载更多，这里做下延时加载

      setTimeout(function() {

        that.getData()

      }, 2000)

    }

  },

  //访问网络,请求数据  

  getData() {

    let that = this;

    //第一次加载数据

    if (currentPage == 1) {

      this.setData({

        loadMore: true, //把"上拉加载"的变量设为true，显示  

        loadAll: false //把“没有数据”设为false，隐藏  

      })

    }

    //云数据的请求

    wx.cloud.database().collection("list")

      .skip(currentPage * pageSize) //从第几个数据开始

      .limit(pageSize)

      .get({

        success(res) {

          if (res.data && res.data.length > 0) {

            console.log("请求成功", res.data)

            currentPage++

            //把新请求到的数据添加到dataList里  

            let list = that.data.dataList.concat(res.data)

            that.setData({

              dataList: list, //获取数据数组    

              loadMore: false //把"上拉加载"的变量设为false，显示  

            });

            if (res.data.length < pageSize) {

              that.setData({

                loadMore: false, //隐藏加载中。。

                loadAll: true //所有数据都加载完了

              });

            }

          } else {

            that.setData({

              loadAll: true, //把“没有数据”设为true，显示  

              loadMore: false //把"上拉加载"的变量设为false，隐藏  

            });

          }

        },

        fail(res) {

          console.log("请求失败", res)

          that.setData({

            loadAll: false,

            loadMore: false

          });

        }

      })

  },

})



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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码

1，我们首先进页面时会请求前10条内容

2，10条内容请求成功以后，我们会把请求到的内容加入dataList数组，然后把dataList里的数据显示到页面上。并将currentPage加一，用于请求第二页数据。

3，当用户滑动到底部时，会触发onReachBottom事件，在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1，这里要记住一定，一定要请求成功以后才将currentPage +1。

三，列表布局和样式

=============

其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。

1，index.wxml

总结

这个月马上就又要过去了，还在找工作的小伙伴要做好准备了，小编整理了大厂java程序员面试涉及到的绝大部分面试题及答案，希望能帮助到大家

===

其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。

1，index.wxml

总结

这个月马上就又要过去了，还在找工作的小伙伴要做好准备了，小编整理了大厂java程序员面试涉及到的绝大部分面试题及答案，希望能帮助到大家

[外链图片转存中…(img-YX0IxXYS-1714698598080)]

[外链图片转存中…(img-Sf3Yprjt-1714698598081)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录