javascript - 如何进行无限滚动,在Vue js中动态渲染列表(仅可见)
问题描述
我有一个非常大的对象数组,其中有很多数据要由 Vue 在组件中渲染到 DOM,我想最好的方法是只渲染将要可见的 HTML,例如,如果每个高度为 100 像素的组件和高度为 1000 像素的组件容器一次只渲染 10 个组件;直到用户向下或向上滚动,并以一种 FIFO 方式(先进先出)渲染和“取消渲染”相应的元素。
所以我想知道的是:这是最好的方法吗?,可以通过使用一个包含 10 个对象的数组来解决,并将 100px 添加到容器的高度(在底部和顶部放置 50px 额外的容器(显示指令)。我不知道。
(好的,这个问题是指列表的动态呈现,而不是动态组件的动态加载或动态组件)。
任何想法、方法、标准或技术都会非常有用!
var app = new Vue({
el: '#app',
data: {
users: Array(1000).fill({
gender: "male",
name: {
title: "mr",
first: "vincent",
last: "ouellet"
},
location: {
street: "6963 disputed rd",
city: "brockton",
state: "yukon",
postcode: "Z4J 0J2",
coordinates: {
latitude: "-60.8550",
longitude: "-36.0196"
},
timezone: {
offset: "+3:30",
description: "Tehran"
}
},
email: "vincent.ouellet@example.com",
login: {
uuid: "eb9b61f7-fb0b-4731-9a1c-f4b2a7b3b6a9",
username: "bigpeacock949",
password: "nyjets",
salt: "0TdUElhf",
md5: "0fbc0edb70fda545f8838634f11f4be2",
sha1: "f83e02d917721a1516b74937841b9c7f75a75d1e",
sha256: "69e2c04bd4ccb43815b529a7182e1e59b9f788032b8197af54b9b6d3f907b8a3"
},
dob: {
date: "1959-08-27T20:26:03Z",
age: 59
},
registered: {
date: "2013-10-20T04:51:58Z",
age: 4
},
phone: "647-173-6604",
cell: "544-306-1457",
id: {
name: "",
value: null
},
picture: {
large: "https://randomuser.me/api/portraits/men/13.jpg",
medium: "https://randomuser.me/api/portraits/med/men/13.jpg",
thumbnail: "https://randomuser.me/api/portraits/thumb/men/13.jpg"
},
nat: "CA"
}
)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<ul v-for="(user, i) in users">
<li>
<image :src="`https://randomuser.me/api/portraits/men/${i}.jpg`"/>
<!-- IM THE REAL APLICATION THIS IS A VERY HEAVY UI -->
<pre>{{user}}</pre>
</li>
</ul>
</div>
解决方案
在您创建的方法上,您可以添加一个事件侦听器来查找文档的结尾。
window.onscroll = () => {
let bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight ===
document.documentElement.offsetHeight;
if (bottomOfWindow) {
axios.get(`https://randomuser.me/api/`).then(response => {
this.persons.push(response.data.results[0]);
});
}
};
一旦你得到你的回应,你就可以推送到你用来迭代的数组。但是,当您在移动设备中使用时,您需要监听触摸事件而不是滚动。
或者,我发现这个插件https://peachscript.github.io/vue-infinite-loading/很容易实现,它可以处理移动和桌面事件。
推荐阅读
- google-apps-script - 是否可以将数据范围从一个电子表格复制到另一个电子表格?
- java - 创建对象将最后创建的对象的值分配给java中Arraylist中的每个其他对象
- rust - 使用 std::iter::Iterator::reduce 进行求和的正确语法是什么?
- c# - 当用户输入与字符串匹配的关键字时,将执行 Else 语句
- python - python中的Psychopy:按下键时有两个答案,释放键时有第二个答案
- ios - 使用 textField 以编程方式加载键盘并使用 swift 发送按钮
- php - 如何记录通过php销毁会话的时间
- d3.js - ObservableHQ 中的 FileAttachment - 如果在 2 个单元格或 1 个单元格内,则行为不同:TypeError:reading.map 不是函数
- r - 使用R的宽格式数据帧到长格式数据帧
- php - 错误 [RuntimeException] 无法扫描“数据库/种子”中的类