如何在 Vuejs 和 Vuetify 的延迟加载上延迟加载项目列表？

Question

我正在尝试制作一个无限滚动列表，但它真的不是延迟加载，被这个卡住了几个小时，整个列表都会进来。

      .....
    <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}}
     </....

用于测试的API：https://jsonplaceholder.typicode.com/posts

Answer 1

有一个新的virtual-scroller 组件，但它不适用于网格行/列等响应式内容。而是使用v-lazy...

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

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

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

   

演示：https://codeply.com/p/eOZKk873AJ

Answer 2

我可以建议使用 v-intersect 的另一种解决方案，它非常适合我。

抱歉，sn-p 可能无法像我的代码那样工作，但这个想法应该很清楚

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