LAC applet on the micro-channel pull-down refresh carrier

You should use a micro channel small single song program components to achieve the effect of single song effects achieved.

Cloud by calling the function, the single song data to request from the cloud database.

In my cloud database already exists a collection named playlist, as follows:

Get the template database

15 Get the data from the database in the cloud playlist

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

Execution results are as follows:

Cloud write function

New function named music in the cloud

Cloud function to write music for the songs get a single cloud database data

// 云函数入口文件
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
}

Cloud function call

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
      })
    })

...

View the print results:

Description cloud function call is successful.

Single song displays the following effects:

---

Raja upload and refresh the drop-down

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()
  },

...
}