uniapp底部翻页
实现底部翻页的方法
在UniApp中实现底部翻页功能，通常可以通过scroll-view组件结合分页逻辑完成。以下是具体实现方式：
使用scroll-view组件
<template>
<scroll-view
scroll-y
@scrolltolower="loadMore"
style="height: 100vh;"
>
<!-- 列表内容 -->
<div v-for="(item, index) in list" :key="index">
{{ item }}
</div>
<!-- 加载状态提示 -->
<div v-if="loading">加载中...</div>
<div v-if="noMore">没有更多了</div>
</scroll-view>
</template>分页逻辑实现
<script>
export default {
data() {
return {
list: [], // 数据列表
page: 1, // 当前页码
pageSize: 10, // 每页数量
loading: false, // 加载状态
noMore: false // 是否全部加载完成
}
},
methods: {
loadMore() {
if (this.loading || this.noMore) return;
this.loading = true;
this.page++;
// 模拟API请求
setTimeout(() => {
const newData = this.getData(this.page, this.pageSize);
if (newData.length === 0) {
this.noMore = true;
} else {
this.list = [...this.list, ...newData];
}
this.loading = false;
}, 500);
},
getData(page, pageSize) {
// 实际项目中替换为真实API调用
return Array(pageSize).fill(0).map((_, i) =>
`Item ${(page - 1) * pageSize + i + 1}`
);
}
},
created() {
// 初始化数据
this.list = this.getData(1, this.pageSize);
}
}
</script>注意事项
- 确保
scroll-view设置了固定高度，否则无法触发滚动事件 - 在
@scrolltolower事件中需要添加防抖逻辑，避免重复触发 - 当数据全部加载完成后，可以通过
noMore标志位阻止继续加载 - 实际项目中应将数据请求封装为独立方法
替代方案
对于更复杂的分页需求，可以考虑使用第三方组件如mescroll-uni，它提供了更完善的上拉加载和下拉刷新功能：
-
安装mescroll-uni：
npm install mescroll-uni -
基本使用示例：
<template> <mescroll-uni @init="mescrollInit" @up="upCallback" :height="'100%'"> <!-- 列表内容 --> </mescroll-uni> </template> -
配置回调方法：
methods: { mescrollInit(mescroll) { this.mescroll = mescroll; }, upCallback(mescroll) { // 上拉加载逻辑 } }
