uniapp上滑翻页
上滑翻页实现方法
在UniApp中实现上滑翻页功能，通常结合页面滚动事件和触底加载逻辑。以下是几种常见实现方式：
监听页面滚动事件
通过onReachBottom生命周期函数实现自动加载更多：
export default {
onReachBottom() {
if (this.hasNextPage && !this.loading) {
this.pageNum++
this.loadData()
}
},
methods: {
async loadData() {
this.loading = true
const res = await api.getList({ page: this.pageNum })
this.list = [...this.list, ...res.data]
this.hasNextPage = res.hasNextPage
this.loading = false
}
}
}自定义滚动容器实现
对于非页面级滚动区域，使用scroll-view组件：
<scroll-view
scroll-y
@scrolltolower="loadMore"
style="height: 100vh">
<!-- 内容列表 -->
</scroll-view>methods: {
loadMore() {
if (!this.isLoading && this.hasMore) {
this.fetchNextPage()
}
}
}优化加载体验
添加加载状态提示和防抖处理：
data() {
return {
loading: false,
finished: false,
throttleTimer: null
}
},
methods: {
handleScroll: _.throttle(function() {
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
const scrollTop = document.documentElement.scrollTop
if (scrollTop + clientHeight >= scrollHeight - 50) {
this.loadMore()
}
}, 500)
}注意事项
- 列表数据需要分页接口支持
- 移动端建议使用
onReachBottom而非手动计算滚动位置 - 安卓平台可能出现滚动距离计算偏差
- 需要处理重复请求和加载完成状态
- 长列表建议使用uv-list等优化组件
以上方法可根据具体项目需求选择或组合使用，核心逻辑都是通过监听滚动位置触发数据加载。
