uniapp底部翻页
uniapp实现底部翻页功能
在uniapp中实现底部翻页功能通常需要结合滚动视图和分页逻辑。以下是几种常见实现方式：
滚动视图结合触底加载
使用scroll-view组件监听触底事件实现分页加载：
<template>
<scroll-view
scroll-y
@scrolltolower="loadMore"
style="height: 100vh">
<!-- 列表内容 -->
<view v-for="item in list" :key="item.id">
{{ item.content }}
</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading">加载中...</view>
<view v-if="noMore" class="no-more">没有更多了</view>
</scroll-view>
</template>分页数据请求逻辑
实现分页加载的核心JavaScript逻辑：
export default {
data() {
return {
list: [],
page: 1,
pageSize: 10,
loading: false,
noMore: false
}
},
methods: {
async loadData() {
if (this.loading || this.noMore) return
this.loading = true
try {
const res = await api.getList({
page: this.page,
pageSize: this.pageSize
})
if (res.data.length) {
this.list = this.list.concat(res.data)
this.page++
} else {
this.noMore = true
}
} finally {
this.loading = false
}
},
loadMore() {
this.loadData()
}
},
mounted() {
this.loadData()
}
}优化加载提示
可以添加更友好的加载状态提示：
.loading, .no-more {
padding: 20rpx;
text-align: center;
color: #999;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
}使用页面生命周期
在页面生命周期中处理分页重置：
onPullDownRefresh() {
this.page = 1
this.list = []
this.noMore = false
this.loadData().finally(() => {
uni.stopPullDownRefresh()
})
}第三方组件方案
可以使用uni-ui中的load-more组件简化实现：
<template>
<view>
<uni-list>
<uni-list-item v-for="item in list" :title="item.title" />
</uni-list>
<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
</view>
</template>注意事项
- 需要处理网络请求失败的情况
- 避免重复请求
- 列表数据较多时考虑虚拟列表优化
- 安卓平台可能需要额外处理滚动性能问题
以上方案可以根据实际项目需求选择或组合使用。对于复杂场景，还可以考虑使用专门的列表组件如mescroll-uni等第三方解决方案。
