微信小程序云函数分页加载
发布于 2 年前 作者 dduan 2749 次浏览 来自 分享

公用前端代码
<view class=“post grid” wx:for="{{list}}" wx:key=“id”>
<view class=“headline”>{{item.title}}</view>
</view>

云函数分页方式代码
// 云函数入口文件
const cloud = require(‘wx-server-sdk’)

cloud.init()
const db=cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
return await db.collection(“hdllinggan”).orderBy(“orderid”,“desc”)
.skip(event.len)//分页
.limit(event.pageNum)//每页加载多少
.get()
}

页面js调用代码
Page({
data: {
list: [],
},

getData(e) {
// console.log(e.currentTarget.dataset.page)
let page = e.currentTarget.dataset.page - 1
console.log(“计算以后的page”, page)
this.getList()
},

getList() {
wx.showLoading({ //设置加载中图标
title: ‘加载中。。。。。’,
})
console.log(“当前list的长度”, this.data.list.length)
let len = this.data.list.length

//调用云函数
wx.cloud.callFunction({
  name: "hdllinggan",
  data: {
    pageNum: 10,//每页加载多少
    len: len,//分页用的
  }
}).then(res =&gt; {
  wx.hideLoading() //加载完成后隐藏加载图标
  console.log("调用成功", res)
  if (res.result.data.length &lt;= 0) {  //没有更多数据的友好提示
    wx.showToast({
      icon: "none",
      title: '没有更多数据了',
    })
  }
  this.setData({
    // list: res.data
    list: this.data.list.concat(res.result.data)
  })

}).catch(err =&gt; {
  wx.hideLoading() //加载完成后隐藏加载图标
  console.log("调用失败", err)
})

},
/**

  • 生命周期函数–监听页面加载
    */
    onLoad: function (options) {
    this.getList(0)
    },

/**

  • 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {
    this.getList()
    },
    })
回到顶部