vue3 解决长列表性能问题

全局引入 1、安装

yarn add vue3-quick-list 或 npm install vue3-quick-list --save

2、引入

全局
const app = createApp(App)
import ZQuickList from 'vue3-quick-list';
app.use(ZQuickList)

局部注册
import { ZQuickList } from 'vue3-quick-list';

3、使用

提示

    // scrollDown 上拉更多
    // dataKey 指定key值字段 默认id
    // itemHeight 可指定列高 默认 220
    // showNum 显示多少条数据  默认10
    // count 缓冲项 默认0
    // customClass   'css-name' // 自定义类名

    <ZQuickList :data="dataList" @ScrollDown="scrollDown">
        <template #top>
            <div>头部</div>
        </template>

        <template v-slot="{ item, index }">
            // 你的自定义Item
            <ListItem :data="item" :idx="index" />
        </template>

        <template #bottom>
            <div class="flex loading">加载中...</div>
        </template>
    </ZQuickList>