Vue.js 如何在Vuejs和Vuetify'；什么是懒虫？

我试图制作一个无限的滚动列表，但它真的不是懒惰加载，被困在这几个小时，整个列表将进来

      .....
    <v-col
      v-for="(post, i) in posts"
      :key="i"
      cols="12"
    >
    <v-lazy
    v-model="isActive"
    :options="{
      threshold: .5
    }"
    transition="fade-transition"
  >
          {{Content here}}
     </....

。。。。。
{{Content here}}
有一个新的
virtualscroller
组件，但它不适用于网格行/列等响应性内容。而是使用
v-lazy

我发现，为了让
v-lazy
交叉点观察者工作，列需要定义最小高度（大约为卡的预期高度）。使用
v-sheet
或
v-responsive
之类的工具来设置
min height
并包含卡

还将
v-lazy
的
v-model
绑定到每个帖子（即：post.isActive），而不是全局
isActive
变量

        <v-col lg="3" md="4" sm="6" cols="12" v-for="(post, index) in posts">
                <v-sheet min-height="250" class="fill-height" color="transparent">
                    <v-lazy 
                        v-model="post.isActive" :options="{
                            threshold: .5
                        }"
                        class="fill-height">
                        <v-card class="fill-height" hover>
                            <v-card-text>
                                <v-row :key="index" @click="">
                                    <v-col sm="10" cols="12" class="text-sm-left text-center">
                                        #{{ (index+1) }}
                                        <h2 v-html="post.title"></h2>
                                        <div v-html="post.body"></div>
                                    </v-col>
                                </v-row>
                            </v-card-text>
                        </v-card>
                    </v-lazy>
                </v-sheet>
        </v-col>

   


#{（索引+1）}

演示：
我可以推荐另一个使用v-intersect的解决方案，它非常适合我

很抱歉，代码片段可能没有按照我的代码组成的方式工作，但是想法应该非常清楚

<template>
  <v-list class="overflow-y-auto" max-height="500">
    <v-list-item v-for="item in items">
      {{ item.name }}
    </v-list-item>
    <v-skeleton-loader v-if="moreDataToAvailable" v-intersect="loadNextPage" type="list-item@5" />
  </v-list>
</template>

<script lang="ts">
import Vue from 'vue'

const pageSize = 10

export default Vue.extend({
  data(): any {
    return {
      pageLoaded: 0,
      totalCount: 100,//fetch from API
      items: []
    }
  },
  computed: {
    moreDataToAvailable (): boolean {
      return Math.ceil(this.totalCount / pageSize) - 1 > this.pageLoaded
    }
  },
  methods {
    async loadNextPage (entries: IntersectionObserverEntry[]) {
      if (entries[0].isIntersecting && this.moreDataToAvailable) {
        const nextPage = this.pageLoaded + 1
        const loaded = await this.loadPage(nextPage) //API call
        loaded.data.forEach((item: any) => this.items.push(item))
        this.totalCount = loaded.totalCount
        this.pageLoaded = nextPage
      }
    },
  }
})
</script>


{{item.name}
从“Vue”导入Vue
常量页面大小=10
导出默认Vue.extend({
data（）：任何{
返回{
已加载页面：0，
totalCount:100，//从API获取
项目：[]
}
},
计算：{
moreDataToAvailable（）：布尔值{
返回Math.ceil（this.totalCount/pageSize）-1>this.pageLoaded
}
},
方法{
异步加载下一页（条目：IntersectionObserverEntry[]）{
if（条目[0].isIntersecting&&this.moreDataToAvailable）{
const nextPage=this.pageLoaded+1
const loaded=wait this.loadPage（nextPage）//API调用
loaded.data.forEach（（项：any）=>this.items.push（项））
this.totalCount=load.totalCount
this.pageLoaded=下一页
}
},
}
})
如果您可以将Vuetify更新为
2.3.0-beta.3
，它有一个
虚拟滚动条
组件可供使用。但问题是虚拟滚动条不适用于网格行/列。。。它只适用于单个“列”的内容这工作得很好！！！非常感谢你！像这样复杂的东西真的不可能用文档本身来理解。我已经为此挣扎了3天了，谢谢你的帮助数据这是在intersect上获取更多项目的正确方法，与公认的答案相反，惰性加载已经获取的项目。我建议将旧数组和新数组合并，而不是在循环中推送每个项，但仍然有效。我现在这样做：this.items.push[…loaded]