微信小程序 onReachBottom 上拉加载更多 onPullDownRefresh 下拉刷新

功能说明:微信小程序 onReachBottom 上拉加载更多 onPullDownRefresh 下拉刷新

实现思路:

1,首次请求获取初始数据以及下一页请求的地址,并将下一页请求地址作为新的接口请求地址;

2,通过新的接口请求地址获取的数据与原来获取的数据进行合并,进而达到加载更多的目的;

index.js

//获取应用实例
var app = getApp()
Page({
  data: {
    dramaslist: {},
    userInfo: {},
  },

  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getDramaslist(function(dramaslist){
      //更新数据
      that.setData({
        dramaslist:dramaslist,
      })
    })
  },
  /*下拉刷新*/
  onPullDownRefresh:function(){
   var that = this
   //下页地址制空，只获取第一页数据
   app.globalData.nextpage = null
   app.getDramaslist(function(dramaslist){
      //更新数据
      that.setData({
        dramaslist:dramaslist
      })
    })
    wx.stopPullDownRefresh()
  },

  /*上拉触底时触发*/
  onReachBottom:function(){
   var that = this
   app.getDramaslist(function(dramaslist){
      //更新数据
      that.setData({
        dramaslist:dramaslist
      })
    })
    
  }
  

})

app.js

//app.js

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getDramaslist:function(cb){
  
    if(this.globalData.nextpage){
      //通过接口获取的下页的请求地址
      var pageurl = this.globalData.nextpage
    }else{
      //接口初始请求地址
      var pageurl = 'http://192.168.1.146:81/v4/dramas'
    }
    var that = this
    wx.request({
      url: pageurl,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(pageurl)
        //console.log(that.globalData.dramaslist)
        if (that.globalData.dramaslist) {
          that.globalData.dramaslist.push.apply(that.globalData.dramaslist, res.data.data.dramasList)
        } else {
          that.globalData.dramaslist =  res.data.data.dramasList
        }        
        that.globalData.nextpage = res.data.data.nextPageUrl
        typeof cb == "function" && cb(that.globalData.dramaslist)
      }
    })
  },
  globalData:{
    dramaslist:null,
    nextpage:null
  }
})
​