uniapp列表分页
分页实现方法
在UniApp中实现列表分页功能，通常需要结合前端页面和后端接口共同完成。以下是常见的实现方式：
前端页面结构
使用<scroll-view>组件或<uni-list>组件作为容器，搭配onReachBottom生命周期实现滚动加载：
<template>
<scroll-view
scroll-y
@scrolltolower="loadMore"
style="height: 100vh">
<view v-for="(item,index) in list" :key="index">
<!-- 列表项内容 -->
</view>
<view v-if="loading">加载中...</view>
<view v-if="noMore">没有更多了</view>
</scroll-view>
</template>数据逻辑处理 在script部分定义分页相关变量和方法：
data() {
return {
list: [],
page: 1,
pageSize: 10,
loading: false,
noMore: false
}
},
methods: {
async loadData() {
if (this.loading || this.noMore) return;
this.loading = true;
const res = await uni.request({
url: 'your_api_url',
data: {
page: this.page,
pageSize: this.pageSize
}
});
if (res.data.length) {
this.list = [...this.list, ...res.data];
this.page++;
} else {
this.noMore = true;
}
this.loading = false;
},
loadMore() {
this.loadData();
}
},
onLoad() {
this.loadData();
}优化建议
下拉刷新功能 添加下拉刷新提升用户体验：
onPullDownRefresh() {
this.page = 1;
this.list = [];
this.noMore = false;
this.loadData().finally(() => {
uni.stopPullDownRefresh();
});
}性能优化
对于长列表建议使用<uni-list>的回收滚动功能：
<uni-list>
<uni-list-item
v-for="(item,index) in list"
:key="index"
:title="item.title"
:note="item.desc" />
</uni-list>错误处理 增加网络请求错误处理：
try {
const res = await uni.request({...});
// 处理数据
} catch (e) {
uni.showToast({
title: '加载失败',
icon: 'none'
});
} finally {
this.loading = false;
}注意事项
- 分页参数需与后端约定一致，常见有
page/pageSize或offset/limit两种模式 - 列表数据量较大时应考虑虚拟滚动技术
- 安卓平台需注意scroll-view的height必须设置为固定值
- 分页加载时应显示加载状态，避免用户重复操作
通过以上方法可以实现基础的列表分页功能，根据实际项目需求可进一步扩展优化。
