InfiniteScroll 无限滚动

代码演示

基础用法

<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>

<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>

<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>

错误提示

<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>

<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>

<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

<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>

<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>

<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	自定义加载失败后的提示文案