InfiniteScroll 无限滚动

代码演示

基础用法

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

const count = ref(0)
const loading = ref(false)
const finished = ref(false)
const error = ref(false)

function loadData() {
  loading.value = true
  setTimeout(() => {
    count.value += 10
    loading.value = false

    if (count.value >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

<template>
  <x-infinite-scroll
    v-model:error="error"
    v-model:loading="loading"
    :finished="finished"
    class="infinite"
    @load="loadData"
  >
    <div
      v-for="item in count"
      :key="item"
      class="infinite-item"
    >
      {{ item }}
    </div>
  </x-infinite-scroll>
</template>

<style lang="less" scoped>
.infinite {
  height: 400px;
}
.infinite-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: @control-item-bg-hover;
}
</style>

错误提示

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

const count = ref(0)
const loading = ref(false)
const finished = ref(false)
const error = ref(true)

function loadData() {
  loading.value = true
  setTimeout(() => {
    count.value += 10
    loading.value = false

    if (count.value >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

<template>
  <x-infinite-scroll
    v-model:error="error"
    v-model:loading="loading"
    :finished="finished"
    class="infinite"
    error-text="请求失败，点击重新加载"
    @load="loadData"
  >
    <div
      v-for="item in count"
      :key="item"
      class="infinite-item"
    >
      {{ item }}
    </div>
  </x-infinite-scroll>
</template>

<style lang="less" scoped>
.infinite {
  height: 400px;
}
.infinite-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: @control-item-bg-hover;
}
</style>

使用 hooks

<script setup>
import { onMounted, ref } from 'vue'
import { useInfiniteScroll } from '@/components/InfiniteScroll'

const infiniteRef = ref()
const count = ref(0)

const { initInfiniteScroll, showLoading, hideLoading, showFinished, statusText } = useInfiniteScroll()

onMounted(() => {
  initInfiniteScroll(infiniteRef.value, {
    onLoad: () => {
      loadData()
    },
  })
})

function loadData() {
  showLoading()
  setTimeout(() => {
    count.value += 10
    hideLoading()

    if (count.value >= 40) {
      showFinished()
    }
  }, 1000)
}
</script>

<template>
  <div
    ref="infiniteRef"
    class="infinite"
  >
    <div
      v-for="item in count"
      :key="item"
      class="infinite-item"
    >
      {{ item }}
    </div>
    <div
      class="align-center color-placeholder"
      @click="loadData"
    >
      {{ statusText }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.infinite {
  height: 400px;
  overflow: auto;
}
.infinite-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: @control-item-bg-hover;
}
</style>

API

Props

名称	说明	类型	默认值
loading(v-model)	是否处于加载状态，加载过程中不触发 load 事件	boolean	false
error(v-model)	是否加载失败，加载失败后点击错误提示可以重新触发 load 事件	boolean	false
loading-text	加载过程中的提示文案	string	正在努力加载
finished	是否已加载完成，加载完成后不再触发 load 事件	boolean	false
finished-text	加载完成后的提示文案	string	没有更多了
error-text	加载失败后的提示文案	string	加载失败，点击重新加载
immediate-check	是否在初始化时立即执行滚动位置检查	boolean	true
distance	滚动条与底部距离小于 distance 时触发 load 事件	number	30

Events

事件名	说明	回调参数
load	滚动条与底部距离小于 distance 时触发	-

Slots

名称	说明
default	列表内容
loading	自定义底部加载中提示
finished	自定义加载完成后的提示文案
error	自定义加载失败后的提示文案