微信小程序--云开发之获取多条数据(大于限制20条)

前言

微信小程序云开发中的获取数据API一次最多获取20条记录,那么怎么获取全部记录呢?
在这里插入图片描述

方法一

利用上拉刷新,每上拉一次(触碰底部时触发function)便获取20条记录,然后与原来记录合并。
js

// pages/mailbox/mailbox.js
const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
email:[],// 邮件
email_nums:0//邮件初始数量
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showLoading({
      title: '刷新中!',
      duration: 1000
    })
    
    let x = this.data.email_nums + 20
    console.log(x)
    let old_data = this.data.email
    db.collection('mail').orderBy('time','desc').skip(x) // 限制返回数量为 20 条
      .get()
      .then(res => {
       // 这里是从数据库获取文字进行转换 变换显示(换行符转换) 
        res.data.forEach((item, i) => {
          res.data[i].content = res.data[i].content.split('*hy*').join('\n');
        })
      
      // 利用concat函数连接新数据与旧数据
      // 并更新emial_nums  
        this.setData({
          email: old_data.concat(res.data),
          email_nums: x
        })
        console.log(res.data)
      })
      .catch(err => {
        console.error(err)
      })
    console.log('circle 下一页');
  
  },
})

方法二

首先计算出数据的总记录数,假设每次取20条,计算出取几次?
最后利用 for循环,一次读出所有数据。
js

const app = getApp().globalData
const db = wx.cloud.database()
  data: {
   },
  onLoad: function () {
  
  // 这里app.music_num是前面计算出来的记录总数
  // 一般是在本界面之前 求出 
  // 当然在本界面求也是可以的 相对麻烦
  // 这里就需要自己去求总数 我就不贴代码了 去开发文档看就行
  //  因为 微信小程序的js 是并发 不按顺序执行代码
 
   var total=app.music_num
    const batchTimes = Math.ceil(total / 20)
    console.log(batchTimes)   //获取需要获取几次 
    var arraypro=[]          // 定义空数据 用来存储之后的数据

    //初次循环获取云端数据库的分次数的promise数组
    for (let i = 0; i < batchTimes; i++) {
      console.log(i)
      db.collection('music').skip(i*20).get({
        success: function (res) {
          x++
          console.log(res.data)
          
          for (let j = 0; j < res.data.length; j++) {
            arraypro.push(res.data[j])
          }
          
          console.log(arraypro)
          console.log(x)
        
          //  这里必须注意微信小程序js中的for循环
          //  比如 for(i=0;i<5;i++)
          //  结果出来的i 是随机的 并不是c++中的 0 1 2 3 4
          //  可能是 1 2 4 0 3
          //  这里非常的坑
        
          if(x==batchTimes){
            k.setData({
            //  这里arraypro 就是的所有记录
            //  把arraypro 赋给自己定义的变量即可 
            })
          }
          
        }
      })
      
    }    
  },
})

总结

方法一适合类似获取动态、朋友圈之类的,不需要一次性获取完所有记录,随用户使用即时获取就行。
方法二适合提取歌单中的音乐等,比如我们有一个歌单,100首歌,肯定是希望打开歌单,歌曲全部出现在界面。虽然这样速度慢了些…

更多

获取更多资料、代码,微信公众号:海轰Pro
回复 海轰 即可

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海轰Pro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值