- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我需要一个用户列表来垂直无限循环。我知道对于这类内容我应该使用“translateY”而不是“top”——但我不知道该怎么做。我已经完成了“顶级”版本并且可以正常工作。有什么改进的想法吗?
谢谢大家!
<div id="app">
<div id="rows">
<div class="row" v-for="row in rows" v-bind:style="{ top: row.top + 'px' }">
{{row.id}}
</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
rows: []
}
},
created() {
for (let i = 0; i < 30; i++) {
this.rows.push({
id: i,
top: i * 40
})
}
setInterval(() => {
window.requestAnimationFrame(this.update);
}, 16);
},
methods: {
update() {
this.rows.forEach(row => {
row.top -= 0.5
});
if (this.rows[0].top <= -40) {
this.rows.push({
id: this.rows[0].id,
top: (this.rows.length - 1) * 40
})
this.rows.shift();
}
}
}
})
</script>
<style>
#rows {
position: relative;
}
.row {
position: absolute;
width: 100%;
height: 40px;
border: 1px solid black;
}
</style>
最佳答案
这是我的尝试:
new Vue({
el: '#app',
data() {
const rows = []
for (let i = 0; i < 30; i++) {
rows.push({
id: i
})
}
return {
offset: 0,
rows
}
},
mounted () {
this.frameTime = Date.now()
const animate = () => {
this.animationId = requestAnimationFrame(() => {
this.update()
animate()
})
}
animate()
},
beforeDestroy () {
cancelAnimationFrame(this.animationId)
},
methods: {
update() {
const now = Date.now()
const elapsed = now - this.frameTime
this.offset -= elapsed / 16
this.frameTime = now
if (this.offset < -400) {
while (this.offset < -40) {
this.rows.push(this.rows.shift())
this.offset += 40
}
}
}
}
})
* {
box-sizing: border-box;
}
#rows {
border: 1px solid #f00;
height: 200px;
overflow: hidden;
}
.row {
width: 100%;
height: 40px;
border: 2px solid black;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<div id="rows">
<div :style="{ transform: `translateY(${Math.round(offset)}px)` }">
<div
v-for="row in rows"
:key="row.id"
class="row"
>
{{row.id}}
</div>
</div>
</div>
</div>
您不必进行我所做的所有更改,如果您愿意,可以有选择地进行大部分更改。主要变化是:
key
在列表项上,以便 Vue 移动 DOM 节点,而不是在随机播放发生时更新所有节点。<div>
这样实际上只有一个元素在移动(我去掉了绝对定位作为其中的一部分)。translateY
, 根据要求。setInterval
, 你应该只需要 requestAnimationFrame
为了这。通过跟踪流逝的时间来控制动画速度。更新:
三个进一步的变化:
box-sizing: border-box
修复计算中的 2px 误差。translateY
使用整个像素。对我来说,这看起来稍微好一点,但在像素比更高的屏幕上,我可以想象它可能看起来更糟。根据具体情况,可能会进行进一步的优化。
translateY
可以完全避免重新排序到每一行,尽管对于可能不切实际的大量行。使用过渡或 CSS 动画对此进行动画处理会很棘手,因为需要行跳回到底部。如果每一行都是独立的动画,我不确定保持所有动画同步会有多容易。
关于javascript - Vue.js - 提高无限列表循环的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57039963/
我有 3 个列表项,每 3 秒向上旋转一次。我正在使用 transformY 属性来做这件事。问题是,当它到达最后一个元素时,它会循环返回,从而产生重新开始的效果。 如何通过在最后一项之后继续向上旋转
我如何制作一个处理旋转的无限/重复世界,就像在这个游戏中一样: http://bloodfromastone.co.uk/retaliation.html 我通过具有这样的层次结构对我的旋转移动世界进
这个问题已经有答案了: Using explicitly numbered repetition instead of question mark, star and plus (4 个回答) 已关闭
程序说明: I have this program of mine which is intended to read every word from a file (large one) and t
while 循环应该比较这两个对象的 ibsn。正在比较的对象: list[0] = new ReadingMatter ("Words and Stuff", "9-082-1090-1");
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我完全被屏蔽了。我尝试修改 C 中的“警报”信号,以便在秒数到期时读取一个简单的变量。我的代码如下: 在主要部分: int semnal; signal(SIGALRM, alarmHandle
我正在接受多行信息(字符串,直到我稍后解析它们)。例如: 1 5 0 2 9 6 2 9 1 我编写这段代码来分隔行,因为我将不得不以某种方式操作每一行。 Scanner scan = new Sca
我不熟悉 jQuery,并且我有多余的 jQuery 调用,我想将它们放入循环中。 $('.class1').on('click', function () { ... $('.class2').on
我有一个树结构,其中每个节点都有 5 个子节点,并且不允许超过 5 个。我希望以广度优先搜索的方式遍历这棵树。 现在我想使用广度优先搜索方式从选定的父节点计算空节点。 例如 如果给定的父节点为 1,则
目标/动机 我想写一个服务,它应该一直运行。但是当服务已经运行时,应该不可能再次启动该服务。 用例 用户 X 打开页面 myService.php 并通过单击页面上的按钮启动服务。之后关闭浏览器。一段
我正在尝试编译 shogun 工具箱,但遇到了这个错误 C:/shogun-3.0.0/shogun-3.0.0/src/shogun/../shogun/mathematics/Math.h
需要学校的 JavaScript 作业帮助,但不知道该怎么做,希望得到一些提示? 我们应该创建一个 6 面掷骰子程序,用户可以选择应该掷多少个骰子,最少 1 个和最多 5 个骰子。 所用骰子数量的总和
我在无限 ScrollView 中有 5 张图片。 因此,为了使 scrollView 无限/循环,我将图像定位如下: 5 1 2 3 4 5 1含义:最后一张图片第一张图片第二张图片.....最后一
我正在使用 ExTwitter库,并希望能够偶尔终止对流式 API 的调用以更改参数。 我当前的代码看起来像这样: for tweet #finished end 关于elixir - 如何中断(无
我想每 3 秒更改一次 div 的背景。这需要循环,因此一旦最后一个背景图像显示,它就会循环回到第一个背景图像,依此类推。我在这样做时遇到了麻烦。 我之前发过一篇文章,内容非常模糊,没有得到帮助。
我在做this教程,无法让我的页面正确加载。我不断在控制台中收到错误:[$rootScope:infdig]。 我对 Angular 很陌生,但从我读到的内容来看,我在某个地方有一个无限循环。我预计它
所以我试图创建一个无限的 asyncIterator/生成器。该代码应该为“for wait of”循环生成“Hello”和“Hi”,然后永远等待下一个值。问题是它不等待第三个值,也不在循环后打印 2
下图显示了我如何在 HTML5/JS 中制作无限背景滚动。我的连续背景由 X block Canvas 组成。我将在到达下一个 Canvas 之前立即渲染它,并释放上一个 Canvas。这里的问题是动
作为一个业余项目,我正在研究一些自制的素数生成问题,尝试编写一些不同的实现作为自学 C 和 C++ 的方法。当然,生成低素数的最快方法是已经拥有它们,所以我想着手建立一个硬盘素数列表数据文件。我想编写
我是一名优秀的程序员,十分优秀!