v-for卡片懒加载实现（Vuetify的v-lazy实现懒加载）

papapipo

已于 2022-04-17 21:12:14 修改

阅读量1.2k

点赞数 1

分类专栏： vue学习项目实训——智能创新引导工具文章标签： vue.js

于 2022-04-08 16:30:52 首次发布

本文链接：https://blog.csdn.net/sdu_DYL/article/details/124044392

版权

项目实训——智能创新引导工具同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue学习

9 篇文章 0 订阅

订阅专栏

本文介绍如何使用v-lazy组件配合v-sheet，确保卡片组件的min-height设置以实现预期高度，同时调整v-model为item.isActive，以实现动态激活效果。通过实例演示如何配置v-lazy，提高前端卡片组件的性能和用户体验。

摘要由CSDN通过智能技术生成

方法参考了 https://www.nuomiphp.com/eplan/255839.html

列必须定义最小高度（约等于卡片的期望高度），以使v-lazy相交观察器正常工作，使用v-sheet或v-responsive来设置min-height和包含卡片。
v-lazy的v-model不是全局的isActive,应该是v-for的每一项的属性（item.isActive）。

<v-row>
    <v-col cols="12" lg="6" v-for="(item, i) in creativity_list">
        <v-sheet min-height="400" class="fill-height" color="transparent">
            <v-lazy
                v-model="item.isActive"
                :options="{
                    threshold: .5
                }"
                class="fill-height"
                transition="fade-transition"
                >
                <v-card
                    style="margin: 10px 20px; padding: 10px; height: 300px"
                    rounded="lg"
                    class="fill-height"
                    :key="i"
                    :hover="true"
                    @click="open(item)"
                >
                </v-card>
            </v-lazy>
        </v-sheet>
    </v-col>
</v-row>