Infinite Scroll

Infinite Scroll

출처: 문서

본문

Deprecated directive

이 디렉티브는 더 이상 유지보수하지 않아요. 3.0.0에서 제거될 예정이니, 대신 el-scrollbar의 infinite scroll을 사용해 주세요.

페이지 하단에 도달하면 더 많은 데이터를 불러오는 무한 스크롤 디렉티브예요.

기본 사용 (Basic usage)

목록에 v-infinite-scroll을 추가하면 스크롤이 바닥에 닿았을 때 로딩 메서드를 자동으로 실행해요.

로딩 비활성 (Disable Loading)

로딩이 끝났거나 더 불러올 데이터가 없을 때 로딩을 비활성화할 수 있어요.

<template>
  <div
    v-infinite-scroll="load"
    class="infinite-list-wrapper"
    :infinite-scroll-disabled="disabled"
  >
    <ul class="list">
      <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-else>No more</p>
  </div>
</template>

<script setup lang="ts">
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>

.infinite-list-wrapper {
  height: 300px;
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}

Directives

더 알아보기 (Learn more)