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

文章目录数据库get模板编写云函数调用云函数上拉加载和下拉刷新这里需要使用微信小程序组件化实现歌单效果中实现的歌单效果。通过调用云函数，从云数据库中请求需要的歌单数据。在我的云数据库中已经存在了一个名为playlist的集合，如下：数据库get模板从云数据库的playlist中获取15条数据db.collection('playlist').skip(0).limit(...

傅晨明

2086人浏览 · 2020-03-01 20:36:20

傅晨明 · 2020-03-01 20:36:20 发布

文章目录

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

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

在我的云数据库中已经存在了一个名为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()
  },

...
}