微信小程序初学笔记（二）——微信小程序云开发小程序端获取云端数据库大于20条的方法

微信小程序初学笔记（二）——微信小程序云开发小程序端获取云端数据库大于20条的方法

总体概述：

*微信小程序云开发小程序端获取云端数据库默认的返回条数是20条。因为小程序中我们需要尽量避免一次性获取过量的数据，只应获取必要的数据。为了防止误操作以及保护小程序体验，小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录，云函数端这个数字则是 100。
所以我们可在加载页面的时候，先加载20条数据，当滑动屏幕到数据最底时，触发方法：

*onReachBottom: function () {}//拉触底事件的处理函数

在该函数中继续请求剩下的数据，继续渲染页面，即可达到边查看边加载的功能。

实现思路：

1. 先定义一个全局变量，在第一次加载页面时就将请求的第一次的20条数据赋值给该全局变量。
2. 当加载好的页面浏览到最后一条数据时，就触发了onReachBottom函数，开始执行拉触底事件函数中跳过以查询的20条数据，接着请求剩下的数据中的20条数据。
3. 将请求的第二次的20条数据（也可能少于20条，可能集合中满足条件的数据一共就在（21,40）之间）用concat函数追加到全局变量中，并将更新后的全局变量赋值给返回到页面wxml的变量。
4. 如果依旧有数据需要展示，即可重复步骤3，直到已经将所有需要展示的数据完全展示。
5. 即可完成大于20条数据展示的需求。

编码实现：
app.js中添加全局变量：

this.globalData = {
      messageInfo:'',
    }

在第一次加载页面时就将请求的第一次的20条数据赋值给该全局变量：app.globalData.messageInfo = res.data;

onReachBottom: function () {
    //console.log(app.globalData.messageCount);
    //console.log(app.globalData.messageInfo.length);
    if (app.globalData.messageCount <= app.globalData.messageInfo.length) {
    //app.globalData.messageCount需要查询展示的数据总条数
    //app.globalData.messageInfo.length已经展示的数据条数
      wx.showToast({
        icon: 'none',
        title: '查询已完成'
      })
    }else{
      wx.showLoading({
        title: '刷新中！',
        duration: 1000
      }),

        db.collection('messageInfo').skip(app.globalData.messageInfo.length)
          // 限制返回数量为 20 条
          .get()
          .then(res => {
            //console.log(res);
            let newdata = app.globalData.messageInfo.concat(res.data);
            app.globalData.messageInfo = newdata;
            //console.log("newdata:"+newdata);
            //console.log("messageInfo:" + app.globalData.messageInfo);
            this.setData({
              ne: newdata
            })

          })
          .catch(err => {
            console.error(err)
          })
    //console.log(app.globalData.messageInfo);
    //console.log('circle 下一页');
    }
    

  },
  

如在查看中有些内容感觉不太连贯，请参考前一篇博客内容：
微信小程序初学笔记（一）_小程序_hard_coding_wang-CSDN博客