- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个非常大的对象数组,其中有大量数据要由 Vue 在 DOM 组件中呈现,我想最好的方法是只呈现将要可见的 HTML,因为例如,如果每个组件的高度为 100px,而组件容器的高度为 1000px,则一次只能渲染 10 个组件;直到用户向下或向上滚动,并以一种 FIFO 方式(先进先出)渲染和“取消渲染”各自的元素。
所以我想知道的是:哪种方法最好?可以通过使用一个包含 10 个对象的数组来解决,并将容器的高度增加 100px(将容器的高度额外增加 50px)底部和顶部),所以当用户在那个额外的空间滚动时做 fifo 的事情,另一个解决方案可以为每个组件提供计算能力(在 window 对象的帮助下)如果可见然后渲染自己(用v-show 指令)。我不知道。
(好的,这个问题指的是列表的动态渲染,而不是组件的动态加载或动态组件)。
任何想法、方法、标准或技术都会非常有用!
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/非常容易实现,它同时处理移动和桌面事件。
关于javascript - 如何在Vue js中做一个无限滚动,动态渲染一个列表(只可见),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52901193/
我有一个关于 JavaScript 语法的问题。实际上,我在自学 MEAN 堆栈教程时想出了编码(https://thinkster.io/mean-stack-tutorial#adding-aut
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗?另外,do 的意义何
我已经编写了读取开关状态的代码,如果按 3 次 # 则退出。 void allkeypadTest(void) { static uint8_t modeKeyCount=0; do
因此,对于上周我必须做的作业,我必须使用 4 个 do-while 循环和 if 语句在 Java 中制作一个猜谜游戏。我无法成功完成它,类(class)已经继续,没有为我提供任何帮助。如果有人可以查
int i=1,j=0,n=10,k; do{ j+=i; i<<1; printf("%d\n",i); // printf("%d\n",12<<1); }while
此代码用于基本杂货计算器的按钮。当我按下按钮时,一个输入对话框会显示您输入商品价格的位置。我遇到的问题是我无法弄清楚如何获得 do ... while 循环以使输入对话框在输入后弹出。 我希望它始终恢
当我在循环中修改字符串或另一个变量时,它的条件是否每次都重新计算?或者在循环开始前一次 std::string a("aa"); do { a = "aaaa"; } while(a.size<10)
我刚刚写了这个,但我找不到问题。我使用代码块并编写了这个问题 error: expected 'while' before '{' token === Build finished: 1 errors
do { printf("Enter number (0-6): ", ""); scanf("%d", &Num); }while(Num >= 0 && Num 表示“超过”,<表
我有一个包含 10 个项目的 vector (为简单起见,所有项目都属于同一类,称其为“a”)。我想要做的是检查“A”不是 a) 隐藏墙壁或 b) 隐藏另一个“A”。我有一个碰撞函数可以做到这一点。
嗨,这是我的第二个问题。我有下表 |-----|-------|------|------| |._id.|..INFO.|.DONE.|.LAST.| |..1..|...A...|...N..|.
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicates: Why are there sometimes meaningless do/while and if/e
来自 wikibook在 F# 上有一小部分它说: What does let! do?# let! runs an async object on its own thread, then it i
我在 Real World Haskell 书中遇到了以下函数: namesMatching pat | not (isPattern pat) = do exists do
我有一个类似于下面的用例,我创建了多个图并使用 gridExtra 将它们排列到一些页面布局中,最后使用 ggsave 将其保存为 PDF : p1 % mutate(label2
当我使用具有 for 循环的嵌套 let 语句时,如果没有 (do (html5 ..)),我将无法运行内部 [:tr]。 (defpartial column-settings-layout [&
执行 vagrant up 时出现此错误: anr@anr-Lenovo-G505s ~ $ vagrant up Bringing machine 'default' up with 'virtua
# ################################################# # Subroutine to add data to the table Blas
我想创建一个检查特定日期格式的读取主机。此外,目标是检查用户输入是否正确,如果不正确,则提示应再次弹出。 当我刚接触编程时,发现了这段代码,这似乎很合适。我仍然在努力“直到” do {
我关注这个tutorial在谷歌云机器学习引擎上进行培训。我一步一步地跟着它,但是在将 ml 作业提交到云时我遇到了错误。我运行了这个命令。 sam@sam-VirtualBox:~/models/r
我是一名优秀的程序员,十分优秀!