毕设4--——获取数据库中歌单并渲染

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了毕设4--——获取数据库中歌单并渲染，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1636字，纯文字阅读大概需要3分钟。

内容图文

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

 

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

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

 

  onl oad: 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获取完之后加上下面这段

 

 

最后渲染出来的效果：

////////////////////////////

至此，从数据库获取数据库资源并渲染在页面完成

内容总结

以上是互联网集市为您收集整理的毕设4--——获取数据库中歌单并渲染全部内容，希望文章能够帮你解决毕设4--——获取数据库中歌单并渲染所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---