在微信小程序中实现上拉加载更多的功能,通常需要使用到onReachBottom
生命周期函数。当页面滚动到底部时,该函数会被触发。以下是一个简单的实现上拉加载更多的示例代码:
首先,在页面的.json
配置文件中,确保enablePullDownRefresh
设置为false
,因为我们使用自定义的上拉加载,而不是下拉刷新:
json复制代码
{ | |
"enablePullDownRefresh": false | |
} |
接着,在页面的.wxml
文件中,创建你的内容布局:
html代码
<view class="container">
<view wx:for="{{listData}}" wx:key="unique">
<!-- 这里展示你的列表数据 -->
<text>{{item.content}}</text>
</view>
<!-- 上拉加载更多提示 -->
<view wx:if="{{loading}}" class="loading-tip">加载中...</view>
<!-- 如果没有更多数据,显示提示 -->
<view wx:if="{{noMore}}" class="no-more-tip">没有更多了</view>
</view>
在页面的.wxss
文件中,添加相应的样式:
css代码
.container {
/* 容器样式 */
}
.loading-tip {
/* 加载中提示样式 */
text-align: center;
padding: 20rpx;
}
.no-more-tip {
/* 没有更多数据提示样式 */
text-align: center;
padding: 20rpx;
color: #999;
}
最后,在页面的.js
文件中,编写逻辑代码:
javascript代码
Page({
data: {
listData: [], // 列表数据
page: 1, // 当前页码
loading: false, // 是否正在加载
noMore: false, // 是否没有更多数据
},
onLoad: function() {
this.loadMore(); // 页面加载时请求第一页数据
},
loadMore: function() {
if (this.data.loading) {
return; // 如果已经在加载,则不再发起请求
}
if (this.data.noMore) {
return; // 如果没有更多数据,则不再发起请求
}
this.setData({
loading: true, // 开始加载时设置状态
});
// 假设有一个获取数据的API,这里使用wx.request模拟请求
wx.request({
url: '你的API地址',
data: {
page: this.data.page,
},
success: (res) => {
if (res.data.length > 0) {
this.setData({
listData: this.data.listData.concat(res.data), // 合并新数据到列表数据
page: this.data.page + 1, // 页码自增
loading: false, // 数据加载完成,设置状态
});
} else {
this.setData({
noMore: true, // 没有更多数据,设置状态
loading: false, // 数据加载完成,设置状态
});
}
},
fail: (err) => {
console.error(err);
this.setData({
loading: false, // 请求失败,设置状态
});
},
});
},
onReachBottom: function() {
this.loadMore(); // 当滚动到底部时,加载更多数据
},
});
在上面的代码中,loadMore
函数负责发起请求获取更多数据,并在获取成功后更新页面数据。onReachBottom
函数在页面滚动到底部时被调用,从而触发加载更多数据的逻辑。
请确保将你的API地址
替换为你实际的后端接口地址,并且根据实际的API响应格式来调整数据处理逻辑。
这只是一个基本的实现示例,你可以根据实际需求进行扩展和优化,比如添加错误处理、分页参数传递、加载动画等。
<view class="contentBody">
<view class="articleItem" wx:for="{{articleList}}" wx:key="articlePublishID" data-row="{{item}}" bind:tap="clickArticle">
<view class="articleItemName">{{item.name}}</view>
<view class="articleItemContent">
{{item.description?item.description:''}}
</view>
</view>
<!-- 上拉加载更多提示 -->
<view wx:if="{{loading}}" class="loading-tip">加载中...</view>
<!-- 如果没有更多数据,显示提示 -->
<view wx:if="{{noMore}}" class="no-more-tip">没有更多了</view>
</view>
// 点击切换导航
clickNav(e){
const row=e.currentTarget.dataset.row
console.log('row',row.name);
this.setData({
articleList:[],
page:1,
noMore:false,
loading:false,
activeNavID:row.navigatorID,
})
this.loadMore()
},
loadMore() {
if (this.data.loading) {
return; // 如果已经在加载,则不再发起请求
}
if (this.data.noMore) {
return; // 如果没有更多数据,则不再发起请求
}
this.setData({
loading: true, // 开始加载时设置状态
});
const that = this
ports.ModuleArticle.getArticlePublishList({
applicationID: app.applicationID,
companyID: app.companyID,
navigatorID: this.data.activeNavID,
sortTypeStartdate: 2,
pageNumber: 10,
currentPage:this.data.page,
}, that, res => {
if (res.data.header.code == 0) {
let obj = res.data.body.data.rows
if (obj.length > 0) {
this.setData({
articleList: this.data.articleList.concat(obj), // 合并新数据到列表数据
page: this.data.page + 1, // 页码自增
loading: false, // 数据加载完成,设置状态
});
} else {
this.setData({
noMore: true, // 没有更多数据,设置状态
loading: false, // 数据加载完成,设置状态
});
}
}else{
this.setData({
loading: false, // 请求失败,设置状态
});
}
})
},
onReachBottom() {
this.loadMore(); // 当滚动到底部时,加载更多数据
},