微信小程序有一个页面上拉触底事件的处理函数onReachBottom（），就在这个函数里去做上拉加载即可，废话不多说，上完整代码。
wxml：
<view wx:for="{
{updateList}}" wx:key="index" class="list">
.....此处为数据渲染过程，已省略
</view>
<view class="noData">
<text class="noData_text">暂无更多数据</text>
</view>
js代码：
data: {
// 信息展示列表
updateList:[],
// 分页参数
pageBean:{
page:1,
pageSize:4,
},
// 下拉加载完后是否还有数据
noData:false
},
// 查询数据
getList(){
let pageBean = this.data.pageBean
wx.showLoading({
title:'加载中...'
})
recent(pageBean).then(res=>{
if (res.data.code == 200) {
this.setData({
updateList:res.data.data.records
})
}
wx.hideLoading(); // 请求结束关闭加载状态
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
let pageSize = this.data.pageBean.pageSize;
let page = this.data.pageBean.page
let updateList = this.data.updateList;
// 当页面上拉触底后，页码增加
this.setData({
'pageBean.page':++page
})
let pageBean = {
page:page,
pageSize:pageSize
}
// console.log(pageSize,page,pageBean);
wx.showLoading({
title:'加载中...',
mask:true // 相当于节流阀，当数据在加载时，不允许重复发起请求
})
recent(pageBean).then(res=>{
if (res.data.code == 200) {
// 对返回的数组长度做一个判断，防止数据不停的push到数组中
if (res.data.data.records.length == 0) {
this.setData({
noData:true
})
}else{
res.data.data.records.forEach(item=>{
updateList.push(item)
console.log(item);
})
this.setData({
updateList:updateList
})
}
}
wx.hideLoading();
})
},
效果图：
