Infinite Scroll 无限滚动 🧪 实验性

无限滚动组件实现了滚动到底部时自动加载更多内容的功能。

基础用法

通过标签 <NueInfiniteScroll> 声明一个无限滚动组件。

触发加载事件

使用无限滚动组件时需要实现一个加载函数用于绑定到组件自定义事件 load-more 作为触发时的执行函数。

通过属性 height 设置无限滚动组件可视区域高度，默认为占满父元素。

<template>
    <nue-infinite-scroll height="360px" @load-more="loadMore">
        <ul class="list">
            <li v-for="i in items" :key="i" class="node">
                {{ i }}
            </li>
        </ul>
    </nue-infinite-scroll>
</template>

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

const items = ref(8);
const loadMore = () => (items.value += 8);
</script>

<style scoped>
.list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;

    .node {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
        background-color: #e4e4e7;
        border-radius: 12px;
        margin: 0;
        padding: 0;
    }
}
</style>

调整触发阈值

触发阈值表示当前滚动位置与列表底部的距离，即滚动位置小于等于该值时，会触发加载事件。

触发阈值通过属性 trigger-height 设置，默认为 1px，即需要滚动到底时才触发加载事件。

<template>
    <nue-infinite-scroll height="360px" trigger-height="180px" @load-more="loadMore">
        <ul class="list">
            <li v-for="i in items" :key="i" class="node">
                {{ i }}
            </li>
        </ul>
    </nue-infinite-scroll>
</template>

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

const items = ref(8);
const loadMore = () => (items.value += 8);
</script>

<style scoped>
.list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;

    .node {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
        background-color: #e4e4e7;
        border-radius: 12px;
        margin: 0;
        padding: 0;
    }
}
</style>

加载和禁用状态

通过属性 loading 设置加载状态。当属性 loading 值为真时，组件默认会显示加载文字，也可以通过插槽 #loading 可以自定义加载时显示的内容。

通过属性 disabled 设置禁用状态。同样地，当属性 disabled 值为真时，组件默认会显示禁用文字，也可以通过插槽 #disabled 可以自定义禁用时显示的内容。

<template>
    <nue-infinite-scroll
        :disabled="IS3.disabled"
        :loading="IS3.loading"
        height="360px"
        theme="custom"
        @load-more="IS3.loadMore"
    >
        <ul class="list">
            <li v-for="i in IS3.count" :key="i" class="node">{{ i }}</li>
        </ul>
        <template #loading>
            <nue-icon name="loading" size="2rem" spin />
        </template>
        <template #disabled>
            <nue-empty description="没有更多内容了 >_<" />
        </template>
    </nue-infinite-scroll>
</template>

<script setup>
import { reactive } from 'vue';

const IS3 = reactive({
    count: 8,
    loading: false,
    disabled: false,
    loadMore: () => {
        IS3.loading = true;
        setTimeout(() => {
            IS3.count += 8;
            IS3.loading = false;
            IS3.disabled = IS3.count >= 32;
        }, 2000);
    }
});
</script>

<style scoped>
.list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;

    .node {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
        background-color: #e4e4e7;
        border-radius: 12px;
        margin: 0;
        padding: 0;
    }
}
</style>