完成读取数据库数据并显示到界面

1 把原来的歌单列表置为空列表，准备从数据库中获取

在onLoad里面添加获取歌单函数自定义为 _getPlaylist（）

  onLoad: function (options) {
    this._getPlaylist()
  },

2 定义云函数music来获取数据库信息

const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
//获取数据库中歌单信息
exports.main = async (event, context) => {
  return await cloud.database()
  .collection("playlist")
  .skip(event.start)
  .limit(event.count)
  .orderBy("createTime","desc")
  .get().then((res)=>{
    return res
  })
}

3 在playlist的json函数中定义_getPlaylist()

const MAX_LIMIT = 15 

_getPlaylist(){
    wx.cloud.callFunction({
      //云函数名字
      name: 'music',
      //需要传递参数start为开始读取的数据，
      //因为要多次读取多以用playList的长度来表示已经读取的长度
      data: {
        start: this.data.playList.length,
        count: MAX_LIMIT
      }
    }).then((res) => {
      console.log(res)
      this.setData({
        playList: res.result.data
      })

    })
  }

补充1：加载时显示一个加载框，所以在_getPlaylist()中加入

为了使加载完之后加载提示去掉，要在后面加上

补充2：因为每次只读取15条数据，所以当页面上拉触底时需要更新数据

在上拉触底函数中加入_getPlaylist（）

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

注：不应该将之前的数据抹去，而是将新的数据补充上

补充3：页面下拉时，页面更新，同理，处理下拉周期函数onPullDownRefresh（）

下拉时页面更新，应该显示全新的数据，所以先清空旧页面

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //先清空
    this.setData({
      playList:[]
    })
    //在获取歌单
    this._getPlaylist()
  },

因为下拉之后会一直显示这三个点，所有在_getPlaylist获取完之后加上下面这段