当用户滚动页面至底部时,会触发一个特定的生命周期钩子函数 onReachBottom
,然后在这个函数内部进行网络请求以获取下一页或更多数据。
首先需要在page.json中配置
{
"path":"pages/index/index",
"style":{
"navigationBarTitleText":"首页",
"onReachBottomDistance": 60
}
}
<template>
<view class="content">
<view v-for="(item, index) in dataList" :key="item.id">
<!-- 显示列表项 -->
</view>
<!-- 当数据不足一屏或者正在加载时显示加载提示 -->
<view v-if="!reachedMax && !loading" class="load-more">上拉加载更多</view>
<view v-if="loading" class="loading">加载中...</view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [], // 初始空数组存放列表数据
loading: false, // 是否正在加载状态
reachedMax: false, // 是否已加载到最大(无更多数据)
page: 1, // 当前请求的页码
pageSize: 20, // 每次请求的数据量
};
},
onReachBottom() {
if (!this.reachedMax && !this.loading) {
this.loading = true; // 开始加载,设置加载状态为true
// 发起网络请求
uni.request({
url: '你的API接口地址', // 替换为实际接口地址
method: 'GET',
data: {
page: this.page + 1,
pageSize: this.pageSize,
},
success: (res) => {
const { data } = res;
if (data.length > 0) {
// 数据合并,假设返回的数据结构包含list属性
this.dataList.push(...data.list);
this.page++;
} else {
// 没有更多数据
this.reachedMax = true;
}
this.loading = false; // 加载完成,重置加载状态为false
},
fail: () => {
this.loading = false;
uni.showToast({ title: '加载失败,请稍后重试', icon: 'none' });
},
});
}
},
};
</script>
这段代码首先定义了一个列表组件,在 onReachBottom
生命周期钩子中监听页面滚动到底部事件。当事件触发且未达到最大加载数量且当前未处于加载状态时,发起新的数据请求。请求成功后,将新获取的数据添加到现有的数据列表中,并更新页码和加载状态。如果服务器返回的数据为空,则认为已经没有更多数据可加载了。