今天在学习微信小程序的时候，遇到了前端需要做下拉刷新的一个分页逻辑的操作，写本文章来记录以下实现微信前端下拉分页的实现。
主要思路
使用微信小程序的下拉刷新的监听事件，每次监听到就调用一次接口，获取数据的方法。同时在监听事件中需要做一个节流的判断，需要定义一个变量isLoading要是isLoading变量的值为true证明还在加载，这个时候就直接return。避免还未加载完成重复请求接口。
分页方法实现思路：通过调用外部接口，传递页码的信息以及一页需要的条数，然后将获取到的数据与旧的数据进行合并处理 list:oldList.concat(newList) 然后page进行增加处理。
注意下面示例代码中的page并不是指页码，而是指当前加载到第几条数据（由于后端这样写了所以并不传递页码，而是传递第几条数据开始）
下面是示例代码：
js
代码语言：javascript复制// pages/home/home.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
show:false,
list:[],
page:0,
pageSize:10,
isEnd:false,
isLoading:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let that = this;
app.checkSeesion()
//判断onLaunch是否执行完毕
if (wx.getStorageSync('token')){
this.getPagesList();
}else{
app.checkLoginReadyCallback = res => {
this.getPagesList();
};
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(this.data.isLoading){
return
}
if(!this.data.isEnd){
this.getPagesList()
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
//自定义方法
//获取页面集方法
getPagesList(){
this.setData({
isloading:true
})
wx.showLoading({
title: '加载中',
})
wx.request({
url:app.globalData.url "userOperation/PagesList", //请求的接口地址，基于https协议
method:'GET', //请求方式
data:{ //发送到服务器的数据
token:wx.getStorageSync('token'),
page:this.data.page,
pageSize:this.data.pageSize
},
success:(res) => {
console.log(res)
let newList = res.data.data
let oldList = this.data.list
if (newList.length === 0) {
wx.showToast({
title: '没有更多数据了',
icon: 'none',
duration: 2000
})
this.setData({
isEnd: true
})
return
}
this.setData({
list:oldList.concat(newList),
page:this.data.page this.data.pageSize
})
},complete:()=>{
wx.hideLoading()
this.setData({
isloading:false
})
}
})
},
//显示弹出层
showPopup() {
this.setData({ show: true });
},
//关闭弹出层
onClose() {
this.setData({ show: false });
}
})wxml
代码语言：javascript复制<block wx:for="{{list}}" wx:for-index="id" wx:for-item="list">
<view>
<text>
留言内容：{{list.commentContent}}
留言回复：{{list.replyContent}}
</text>
</view>
</block>本文共 463 个字数,平均阅读时长 ≈ 2分钟
