思路：在下拉到页面的时候我们可以进行数据请求，请求到在上次加载完毕的后五条数据（举个例子），通过page(页码)，count(加载数据得条数)与start进行联接，我们可以发现：start:(page-1)*count, 但是我们会发现一个问题： 通过这种方法我们只能在前面获取数据的基础上获取到之后的五条数据，并没有起到上拉加载更多数据的作用，只是起到刷新数据的类似效果。 解决： 我们可以通过concat拼接的方式来实现将前面获取的数据与我们再次刷新加载得数据整合起来。 问题2：如何防止多次请求，主要思想：设置状态标志。 通过状态的设置，当第一次数据请求的时候，我们把flag置为false，当第一次请求完后，我们在把flag置为true,同时只有当flag为true的时候我们才可以触发onReachBottom()这个函数，最后不要忘了flag状态的更新哦！ 我们用到的函数： onReachBottom() 【微信小程序滑动到底部触发的函数】
代码：
data: {
list:[],
page:1,
count:5,
flag:true,//判断数据是否加载完成
},
/**
- 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getListData() // 在页面加载的时候加载数据
},
getListData(){
// 当页面加载完后获取列表函数的时候将flag置为false
this.setData({flag:false})
console.log('加载中')
// 页面未加载出数据时候显示Loading
wx.showLoading({
title: '加载中...',
})
// 解构赋值提取数据
let {page,count,list} = this.data
// 获取list列表数据
wx.request({
url: urls.default.top,
header:{
"content-type":"application/text"
},
data:{
start:(page-1)*count, // 加载数据时候页面与数量的关系
count:5,
},
success:res=>{
if(res.statusCode===200){
// 成功请求后然page++这样请求的数据就变了
page++;
// 将page++后的数据与前面的数据拼接起来
list = list.concat(res.data.subjects)
this.setData({
list:list,
page, //简写
flag:true //当下拉后页面数据加载完毕之后将flag置为true
})
}
//加载成功隐藏loading
wx.hideLoading()
} }) }, // 实现上拉加载更多 onReachBottom(){ // 在数据加载完后再次下拉实现再次加载数据
if(this.data.flag){ this.getListData() // 在该页面到底触发该事件 实现数据的加载 }
}
