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}}
</....
解决方案
有一个新virtual-scroller
组件,但它不适用于网格行/列等响应式内容。而是使用v-lazy
...
我发现列需要定义最小高度(大约为卡片的预期高度),以便v-lazy
交叉点观察器工作。使用类似v-sheet
或的东西v-responsive
来设置min-height
和包含卡片。
v-model
还将的绑定v-lazy
到每个帖子(即: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>
推荐阅读
- swift - 有没有办法从我的 UICollectionView 中删除白线空间?
- pandas - 可以创建一个带有部分 multiIndex 列的数据框吗?
- ios - 在 iOS 上的文件应用程序中创建使用文件的应用程序
- firebase - Flutter:基于流式数据库值在页面之间导航的最佳架构
- ios - 如何为 UITableView 中的每个单元格类别指定特定的部分名称
- c# - Entity Framework Core 需要定义一个主键
- docker - Traefik 与 Let's Encrypt
- mysql - Phpmyadmin 导入 sql 文件错误“...在 '1' 附近使用正确的语法”
- java - 使用二分搜索实现底平方根
- swift - 基于 ipad 或 iphone 改变对象的约束