微信小程序的上拉加载与下拉刷新

这里需要使用微信小程序组件化实现歌单效果中实现的歌单效果。

通过调用云函数，从云数据库中请求需要的歌单数据。

在我的云数据库中已经存在了一个名为playlist的集合，如下：

数据库get模板

从云数据库的playlist中获取15条数据

db.collection('playlist')
  .skip(0)
  .limit(15)
  .orderBy('createTime', 'desc')
  .get()

执行结果如下：

编写云函数

新建名为music的云函数

编写music云函数，用于获取云数据库中的歌单数据

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const playlist = await cloud.database().collection('playlist')
    .skip(event.start)
    .limit(event.count)
    .orderBy('createTime', 'desc')
    .get()
    .then((res) => {
      console.log(res)
      return res
    })
  return playlist
}

调用云函数

demo.js :

const db = wx.cloud.database()

Page({

...
  /**
   * 页面的初始数据
   */
  data: {
    playlist:[]
  },

  onLoad: function(options) {
    wx.cloud.callFunction({
      name: 'music',
      data:{
        start: 0,
        count: 15
      }
    }).then((res) => {
      console.log(res)
      this.setData({
        playlist: res.result.data
      })
    })

...

查看打印结果：

说明云函数调用成功。

显示的歌单效果如下：

---

上拉加载和下拉刷新

const MAX_LIMIT = 15
const db = wx.cloud.database()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    playlist: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this._getPlaylist()
  },
  _getPlaylist() {
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name: 'music',
      data: {
        start: this.data.playlist.length,
        count: MAX_LIMIT
      }
    }).then((res) => {
      console.log(res)
      this.setData({
        playlist: this.data.playlist.concat(res.result.data)
      })
      wx.stopPullDownRefresh()
      wx.hideLoading()
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    this.setData({
      playlist: []
    })
    this._getPlaylist()
  },

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

...
}