微信小程序上拉加载下拉刷新要点

上拉加载

1.新建云函数。通过skip、limit、orderBy子句获取数据。

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

2.本地编写函数。调用云函数,传递参数。查询云数据库起始Row为本地数组列表的长度 this.data.playlist.length；查询结果要累加至本地数组列表 this.data.playlist.concat(res.result.data),

const MAX_LIMIT=15
_getPlayList(){
            wx.showLoading({
                  title: '加载中...',
                })
                wx.cloud.callFunction({
                      name:'onLinePlayList',
                      data:{
                            start:this.data.playlist.length,
                            count:MAX_LIMIT
                      }
                }).then(res=>{
                      console.log(res.result.data)
                      this.setData({
                            playlist:this.data.playlist.concat(res.result.data)
                      })
                      wx.stopPullDownRefresh()
                      wx.hideLoading()
                })
      },

3.onReachBottom事件调用_getPlayList函数。this._getPlayList函数()

---

下拉刷新

1.JSON文件中添加"enablePullDownRefresh": true

2.onPullDownRefresh事件清除数组列表内容，调用_getPlayList函数    this.setData({playlist:[]})  this._getPlayList()

3._getPlayList函数中添加 wx.stopPullDownRefresh() ,防止下拉后界面没有回弹。