微信小程序云开发实现分页功能（简单易懂）

我们在页面上进行数据展示的时候，无论是pc端还是移动端，很多情况下需要展示很多很多条的数据。
比如商城，商品的数量是非常多的。但是在我们从后台获取数据的时候，数据的传输数量总是有限制的，这也是为了性能考虑，后台给我们的数据可能是20条，可能是100条。
那我们的任务如果是渲染数据库中的1000条商品，应该怎么做呢？这时候就需要用到分页的功能了，我们可以把1000条商品分为50页，每页20条数据。
这样就既达到渲染1000条数据的目的，也不影响过多的性能。

下面我们利用微信小程序云开发实现一下数据的分页。

  onLoad: function (options) {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    db.collection('zaoCan').get({
      success(res){
        that.setData({
          breakfastFood:res.data,
          food:res.data
        })
        console.log('food',that.data.food);
        wx.hideLoading({
          success: (res) => {},
        })
      }
    })
  },

我直接拿一个我最近做的项目为例，我要做的是一个菜谱的东西，我数据库大概有11000条数据，但是我肯定不可能全部都渲染到页面上。
首先，我们在onLoad函数中从数据库获取20条数据。并且setData给food，这个food就是我们在WXML中渲染的数据。

这个时候我们可以看到，我们拿到了20条数据存到了food中，并且成功渲染到了页面上。

然后分页的话，就需要用到我们的另一个生命周期函数onReachBottom了。

onReachBottom是页面上拉触底事件的处理函数。

这个生命周期函数的属性，完全的契合了我们的分页需求，当用户下拉界面的时候，想要查看更多的菜谱信息，但是我们目前只有20条，用户一直拉的话，肯定会拉到页面底部，这时候就会触发这个onReachBottom函数，我们就在这个函数中实现分页操作。

  onReachBottom: function () {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    var array = that.data.food;
    var name = '';
    if(that.data.TabCur == 0){
      name = 'zaoCan'
    }else if(that.data.TabCur == 1){
      name = 'wuCan'
    }else if(that.data.TabCur == 2){
      name = 'wanCan'
    }
    if(that.data.value == ''){
      db.collection(name).skip(array.length).get({
        success(res){
          if(res.data.length !== 0){
            for(var i = 0; i < res.data.length; i++){
              array.push(res.data[i]);
            }
            console.log(array);
            that.setData({
              food:array
            })
            wx.hideLoading({
              success: (res) => {
                wx.showToast({
                  title: '加载成功',
                })
              },
            })
          }else {
            wx.showToast({
              icon:'none',
              title: '无更多菜谱',
            })
          }
        }
      })
    }else {
      db.collection(name).skip(array.length).where({
        name:db.RegExp({
          regexp:that.data.value,
          options:'i'
        })
      }).get({
        success(res){
          if(res.data.length !== 0){
            console.log(res.data);
            for(var i = 0; i < res.data.length; i++){
              array.push(res.data[i]);
            }
            console.log(array);
            that.setData({
              food:array
            })
            wx.hideLoading({
              success: (res) => {
                wx.showToast({
                  title: '加载成功',
                })
              },
            })
          }else {
            wx.showToast({
              icon:'none',
              title: '无更多信息',
            })
          }
        }
      })
    }
  },

上面这是我这个函数里全部的代码，其中有很多和分页无关的东西，核心的代码就是下面这段：

db.collection(name).skip(array.length).get({
    success(res){
        for(var i = 0; i < res.data.length; i++){
          array.push(res.data[i]);
        }
        console.log(array);
        that.setData({
          food:array
        })
        console.log('food',that.data.food);
        })
    }
  })

下面我们来讲解一下，还是一个正常的向数据库中取值的操作，但是我们加了一个skip属性，这个属性的作用就是指定查询返回结果时从指定序列后的结果开始返回，常用于分页。

你可能有点懵逼，我用通俗的话解释一下，我们现在food里是20条数据，那么我再次向数据库取值的时候，就只需要取第20条数据以后的数据，skip里面的array我们在前面那段长代码中已经赋值了，就是页面中渲染的food。
所以我们分页的话，只需要取现有的数据索引之后的数据。而且我们只能用变量来实现，因为这个skip是个不定值。它可能是20，40，60…

然后success回调里面的内容就是把这次查询到的数据push到现有的数据里面，达到一个汇总的效果。

然后我们就达到了实际的分页效果。

food的数据量随着监听用户的下拉操作，在不断的增加，这就是在实际开中经典的分页功能。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！