云开发学习4--分页加载

一，使用同名函数来简化代码

前端代码

<button bindtap="getData" data-page="1">加载第一页</button>
<button bindtap="getData" data-page="2">加载第二页</button>
<button bindtap="getData" data-page="3">加载第三页</button>

后端代码调用方式

  getData(e) {
    // console.log(e.currentTarget.dataset.page)
    let page = et.page.currentTarget.datase - 1
    console.log("计算以后的page", page)
  },

二，上拉触底函数onReachBottom

• 该方法用来监听页面的上拉触底时间，属于小程序生命周期的一部分（具体讲解后续将在博客内更新）。

三，分页案例展示（分本地和云函数）可直接复制执行

• 页面的分页加载本质上是通过limit()函数以及skip()函数的结合来实现

1.公用前端代码

**************************************************
<view wx:for="{{list}}" wx:key="index">//报黄
  <view class="num">{{item.num}}</view>
</view>

2.本地分页方式代码

Page({
  data: {
    list: [],//用来保存已经加载的数据，可自行优化
  },

  getData(e) {
    // console.log(e.currentTarget.dataset.page)
    let page = et.page.currentTarget.datase - 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.database().collection("nums").skip(len).get()//此处可以通过limit函数设置每页返回的数据，默认不动就是本地最大限制20条
      .then(res => {
        wx.hideLoading() //加载完成后隐藏加载图标
        console.log("获取数据成功", res)
        if (res.data.length <= 0) {  //没有更多数据的友好提示
          wx.showToast({
            icon: "none",
            title: '没有更多数据了',
          })
        }
        this.setData({
          // list: res.data
          list: this.data.list.concat(res.data)//数组数据拼接，将新读取的数据与老数据进行拼接，保证前端数据的连续性，不至于有跳页的感受
        })
      })
      .catch(err => {
        wx.hideLoading() //加载完成后隐藏加载图标
        console.log("获取数据失败", err)
      })
  },

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


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

})

3.云函数分页方式代码

• 云函数主体

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  return await cloud.database().collection("nums")
    .skip(event.len)//分页
    .limit(event.pageNum)//每页加载多少
    .get()
}

• 调用代码

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: "fenye",
      data: {
        pageNum: 30,//每页加载多少
        len: len,//分页用的
      }
    }).then(res => {
      wx.hideLoading() //加载完成后隐藏加载图标
      console.log("调用成功", res)
      if (res.result.data.length <= 0) {  //没有更多数据的友好提示
        wx.showToast({
          icon: "none",
          title: '没有更多数据了',
        })
      }
      this.setData({
        // list: res.data
        list: this.data.list.concat(res.result.data)
      })

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


  },

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


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

})