Infinite Scroll 无限滚动

Infinite Scroll 用于在滚动到底部时加载更多数据。VISTA B 直接使用 Element Plus 的 v-infinite-scroll 指令。

废弃提醒

Element Plus 官方已将 v-infinite-scroll 标记为废弃指令，将在 3.0.0 移除。新功能建议优先使用 el-scrollbar 的无限滚动能力。

基础用法

在需要滚动加载的容器上添加 v-infinite-scroll，并把它绑定到加载方法。滚动到容器底部时，加载方法会自动执行。

1

2

3

4

5

6

7

8

未触发

<script setup>
import { ref } from 'vue'

const count = ref(0)

const load = () => {
  count.value += 2
}
</script>

<template>
  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">
      {{ i }}
    </li>
  </ul>
</template>

禁用加载

使用 infinite-scroll-disabled 可以在加载中或没有更多数据时禁用触发。常见写法是把 loading 和 noMore 合并成一个 disabled 计算属性。

1

2

3

4

5

6

7

8

9

10

<script setup>
import { computed, ref } from 'vue'

const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)

const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false
  }, 2000)
}
</script>

<template>
  <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <div v-for="i in count" :key="i">{{ i }}</div>
    <div v-if="loading">Loading...</div>
    <div v-if="noMore">No more</div>
  </div>
</template>

触发距离与节流

infinite-scroll-distance 用于设置距离底部多少像素时触发加载，infinite-scroll-delay 用于设置滚动监听的节流时延。

1

2

3

4

5

6

7

8

<div
  v-infinite-scroll="load"
  :infinite-scroll-delay="300"
  :infinite-scroll-distance="30"
>
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</div>

指令

属性	说明	类型	默认值
v-infinite-scroll	滚动到底部时执行的加载方法	Function	空
infinite-scroll-disabled	是否禁用加载	boolean	false
infinite-scroll-delay	节流时延，单位为毫秒	number	200
infinite-scroll-distance	触发加载的距离阈值，单位为像素	number	0
infinite-scroll-immediate	是否立即执行加载方法，避免初始状态下内容无法撑满容器	boolean	true

使用提醒

无限滚动适合连续浏览同类数据。业务中需要同时处理加载状态、空状态、到底提示和请求失败重试；如果数据需要精确定位、跳页或批量操作，优先使用 Pagination 分页。