功能说明:微信小程序 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({
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
}
})