マイクロチャネルプルダウンリフレッシュキャリア上のLACアプレット

あなたは使用する必要がありますの効果を達成するために、マイクロチャネルの小さなシングル曲のプログラムコンポーネントを達成シングル曲の効果を。

関数を呼び出すことによって、クラウド、クラウドデータベースからの要求にシングル曲データ。

次のように私のクラウドデータベースではすでに、プレイリストの名前のコレクションが存在します:
ここに画像を挿入説明

テンプレートデータベースを取得します。

15は、クラウドプレイリストのデータベースからデータを取得します。
ここに画像を挿入説明

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

次のように実行結果は以下のとおりです。
ここに画像を挿入説明

クラウドライト機能

クラウドの新機能という名前の音楽
ここに画像を挿入説明

曲の書き込み音楽にクラウド機能は、単一のクラウドデータベースのデータを取得します

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

...
}

公開された446元の記事 ウォン称賛67 ビュー240 000 +

おすすめ

転載: blog.csdn.net/hongxue8888/article/details/104591982