微信小程序云开发实现分页查询

微信小程序云开发增删改查、按条件查询、排序方法实例详解可以看我上一篇博客。

  data: {
    page: 1,
    totalCount: 0, //数据总数
    feeds：[]
  }

查询方法

  /**
   * 获取总数
   */
  getTotalCount() {
    let that = this;
    db.collection('p_user').count({
      success: function (res) {
        console.log(res.total);
        that.setData({
          totalCount: res.total
        })
      }
    })
  },
    /**
   * 获取遛狗榜
   */
  getFeedList() {
    db.collection('p_user').orderBy('totalStep', 'desc').skip(0)
      .limit(10)
      .get({
        success: res => {
          this.setData({
            feeds: res.data
          })
        },
        fail: err => {
          console.log('[数据库] [查询记录] 失败：');
        }
      })
  },

页面上拉触底事件

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let page = this.data.page;
    if (this.data.feeds.length < this.data.totalCount) {
      db.collection('p_user').orderBy('totalStep', 'desc').skip(page * 10)
        .limit(10)
        .get({
          success: res => {
            let feeds = this.data.feeds;
            for (let i = 0; i < res.data.length; i++) {
              feeds.push(res.data[i]);
            }
            this.setData({
              feeds: feeds,
              page: page + 1
            })
          },
          fail: err => {
            console.log('[数据库] [查询记录] 失败：');
          }
        })

    } else if (this.data.showMoreInfo) {
      this.setData({
        showMoreInfo: false
      })
      wx.showToast({
        title: '没有更多数据了',
      })
    }

  },

如果是scroll-view标签：可以使用bindscrolltolower进行触发

<scroll-view scroll-y class='marLR30 feeders_bd' bindscrolltolower="getList">
</scroll-view>

  /**
   * 页面上拉触底事件的处理函数
   */
  getList: function () {
    let page = this.data.page;
    if (this.data.feeds.length < this.data.totalCount) {
      db.collection('p_user').orderBy('totalStep', 'desc').skip(page * 10)
        .limit(10)
        .get({
          success: res => {
            let feeds = this.data.feeds;
            for (let i = 0; i < res.data.length; i++) {
              feeds.push(res.data[i]);
            }
            this.setData({
              feeds: feeds,
              page: page + 1
            })
          },
          fail: err => {
            console.log('[数据库] [查询记录] 失败：');
          }
        })

    } else if (this.data.showMoreInfo) {
      this.setData({
        showMoreInfo: false
      })
      wx.showToast({
        title: '没有更多数据了',
      })
    }
  },

一直在下面打广告的原因并不是为了盈利什么的，主要因为自己做出来的项目如果得到大家的认可会是一件很有成就感，影响大家阅读体验的话我在这说声抱歉。

使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序，内置天气查询功能。欢迎大家扫码体验，项目详情也可到我的置顶博客查看。项目都已在码云上开源，欢迎大家star。wx_superpet这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码：个人简历码云地址
个人简历源码：CSDN下载
wx_superpet源码:wx_superpet码云地址
wx_superpet源码:添加链接描述