uniapp 无限滚动如何实现

在uniapp中如何实现无限滚动加载更多数据的效果？比如滚动到页面底部时自动加载下一页内容，类似分页效果。使用scroll-view组件还是onReachBottom生命周期？具体代码该怎么写？需要监听滚动位置计算吗？有没有完整的示例可以参考？

2 回复

在uni-app中，使用<scroll-view>组件，设置scroll-y属性，并监听@scrolltolower事件。当滚动到底部时，加载更多数据并追加到列表即可实现无限滚动。


在 UniApp 中实现无限滚动（滚动加载更多数据），可以通过监听页面滚动事件，结合条件判断来触发加载。以下是具体实现方法：

核心步骤

  1. 监听页面滚动：使用 onReachBottom 页面生命周期函数。
  2. 加载数据：触发时调用加载更多数据的函数。
  3. 条件控制：确保无重复加载、无数据时停止。

示例代码

export default {
  data() {
    return {
      list: [],         // 数据列表
      page: 1,          // 当前页码
      hasMore: true,    // 是否还有更多数据
      loading: false    // 防止重复加载
    }
  },
  onReachBottom() {
    // 滚动到底部时触发
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },
  methods: {
    async loadMore() {
      this.loading = true
      try {
        // 模拟API请求，替换为你的实际接口
        const res = await this.$http.get('/list', { page: this.page })
        if (res.data.list.length > 0) {
          this.list = this.list.concat(res.data.list)
          this.page++
        } else {
          this.hasMore = false  // 无更多数据
        }
      } catch (error) {
        console.error('加载失败:', error)
      }
      this.loading = false
    }
  },
  onLoad() {
    this.loadMore()  // 页面加载时首次获取数据
  }
}

模板示例

<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }}
    </view>
    <view v-if="loading">加载中...</view>
    <view v-if="!hasMore">没有更多数据了</view>
  </view>
</template>

关键点

  • onReachBottom：UniApp 自带的页面触底钩子，无需手动计算滚动位置。
  • 防重复加载：通过 loading 状态避免滚动时多次请求。
  • 数据判空：根据返回数据长度判断是否还有更多内容。
  • 页面距离设置：可在 pages.json 中调整 onReachBottomDistance（默认 50px）。

注意事项

  • 确保内容高度足够触发滚动。
  • 列表数据较多时，注意性能优化（如使用 @vue/reactivity 或虚拟列表）。
  • 网络错误时提供重试机制。

这样即可实现流畅的无限滚动加载效果。

回到顶部