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

最新推荐文章于 2023-07-11 13:54:53 发布

原创最新推荐文章于 2023-07-11 13:54:53 发布 · 6.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #云开发

微信小程序专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了微信小程序云开发中的数据查询、排序及分页加载等核心操作，并提供了具体的实现代码示例。通过实例展示了如何获取数据总数、按条件排序以及实现页面上拉触底加载更多功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

  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这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码：个人简历码云地址
个人简历源码：优快云下载
wx_superpet源码:wx_superpet码云地址
wx_superpet源码:添加链接描述

个人简历小程序码