vue 向上无缝滚动,vue列表循环滚动
这篇文章主要为大家详细介绍了某视频剪辑软件或钢性铸铁动画实现列表向上无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件或钢性铸铁动画实现列表向上无缝滚动的具体代码，供大家参考，具体内容如下
方法一：vue的实现方法
div id= publish main class= b _ list
div id=publishMain1
活动清单中的div class=b_item v-for=(ac，AC index):key= AC index
！-循环的内容-
/div
/div
div id=publishMain2/div
/div
射流研究…
脚本
导出默认值{
data(){
返回{
计时器：空，
活动列表：[]
}
},
已安装(){
这个. nextTick(()={
这个。roll up()；
});
},
销毁前(){
this.timer=null
清除间隔(这个。定时器)；
},
方法：{
/*向上轮播*/
rollUp() {
设ul1=文档。getelementbyid(“publish main 1”)；
设ul2=文档。getelementbyid(“publish main 2”)；
信箱=文件。getelementbyid(“publish main”)；
ul2。innerhtml=ul1。innerhtml
盒子。scroll top=0；
函数rollStart() {
如果(框。滚动顶部=ul1。滚动高度){
盒子。scroll top=0；
}否则{
box.scrollTop
}
}
这个。timer=setInterval(rollStart，50)；
}
}
}
/脚本
钢性铸铁。b _列表{
身高：19雷姆；
溢出：隐藏；
}
方法二：纯钢性铸铁动画
超文本标记语言
div class=b_list
b _滚动
活动清单中的div class=b_item v-for=(ac，AC index):key= AC index
！-循环的内容-
/div
/div
/div
钢性铸铁
@关键帧滚动顶部{
0% {
-WebKit-transform:translate 3d(0，0，0)；
transform: translate3d(0，0，0)；
}
100% {
-WebKit-transform:translate 3d(0，-300px，0)；
transform: translate3d(0，-300px，0)；
}
}。b _列表{
身高：19雷姆；
溢出：隐藏；
}。b _滚动{
-网络工具包-动画：10秒滚动停止线性无限法线；
动画：10秒滚动停止线性无限法线；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。