vue实现无限滚动,vue 自动滚动
这篇文章主要为大家详细介绍了某视频剪辑软件实现列表无缝循环滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现列表无缝循环滚动的具体代码，供大家参考，具体内容如下
功能介绍：
在个人电脑端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。
大致需求：
1、列表可以使用数组循环遍历；
2、每隔几秒中列表数据向上滚动一定距离，展示下一条数据；
3、滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、横幅图的循环效果);
整体思路：
1、使用两个定时器嵌套实现；
2、需要两个相同容器存放同样内容，实现无缝衔接效果；
效果展示：
完整代码：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
script src= https://UNP kg。com/vue @ 2。6 .14/区/区。量滴js /脚本
风格
/* 滚动表格最外层*/。表输出{
边距：100像素自动；
宽度：500像素
高度：400像素
背景：粉色；
溢出：隐藏；
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
伸缩方向：列；
}。表格框{
宽度：100%;
背景：# 000;
溢出：隐藏
}。tableTit {
背景：# 000;
宽度：100%;
高度：40px
颜色：# 858A84
文本对齐：居中；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。表内部{
高度：自动；
}。方框{
宽度：100%;
高度：50px
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
颜色：# fff
}。盒子。时间{
颜色：# 858A84
}。表4 .地址，表4 .时间，表4 .名称{
框大小：边框-框；
填充：0 5px文本对齐：居中；
溢出：隐藏；
空白：nowrap
文本溢出：省略号；
}。表4 .地址{
宽度：calc(100%-200 px)；
伸缩：0;
}。表4 .姓名，表4 .时间{
宽度：100像素
伸缩：0;
}
/风格
/头
身体
div id=应用程序
div class= tableoOut ref= tableoOut
div class=tableTit
div class=name 姓名/div
div class=地址地址/div
div class=time 入驻时间/div
/div
div class= tableBox ref= tableBox
:style={height: tableHei}
div class= table inner ref= table inner
div class= box v-for= item in 7 :key= item
div class= name"{ item } }/div
div class=地址山东省山东省山东省山东省山东省山东省山东省山东省
山东省山东省山东省山东省山东省/div
div class=" time " 2022-05-26/div
/div
/div
div class=表内部 v-if= size 7
div class= box v-for= item in 7 :key= item
div class= name"{ item } }/div
div class=地址山东省山东省山东省山东省山东省山东省山东省山东省
山东省山东省山东省山东省山东省/div
div class=" time " 2022-05-26/div
/div
/div
/div
/div
/div
/body
脚本
新Vue({
埃尔： #app ，
数据：{
tableHei:"自动",
计时器：空，
大小：0
},
已安装(){
这个。gettable()；
},
方法：{
getTable() {
const outHei=this .$参考文献。tableoout。客户身高-60；
这个。大小=数学。地板(出hei/50)；
这个。表黑=这个。尺寸* 50 像素；
这个。卷轴()；
},
stepScroll() {
常数步长=50;
设num=0；
const tableBox=this .$ refs.tableBox
const步长时间=setInterval(function(){
num=2；
如果（步骤数){
num=0；
间隙(步进时间);
}否则{
表格框。scroll top=2；
}
}, 20);
},
卷轴(){
const那个=这个
const tableBox=this .$ refs.tableBox
const tableInner=this .$ refs.tableInner
清除间隔(这个。定时器)；
这个。timer=setInterval(function(){
如果(表格框。scroll top===表格内部。滚动高度){
表格框。scroll top=0；
}
那个。步进滚动()；
}, 2000);
},
}
})
/脚本
/html
setInterval踩坑：
发现这种方法实现的定时轮播，有一阵没访问页面，会出现卡停的情况，采用下面的解决方法：
脚本
新Vue({
埃尔： #app ，
数据：{
tableHei:"自动",
计时器：空，
尺寸：0,
stopSign: true，//判断定时器是否停止标识
stepTime: null，//改为全局定时器
},
已安装(){
const那个=这个
//增加浏览器激活状态判断。非激活状态为onblur
window.onfocus=function(e) {
const tableBox=that .$ refs.tableBox
const sT=tableBox.scrollTop
console.log(激活状态!)
如果(!that.stopSign) {
表格框。顶部滚动=数学。圆形(sT/50)* 50；
清除间隔(即。步进时间)；
}
}
这个。gettable()；
},
方法：{
getTable() {
const outHei=this .$参考文献。tableoout。客户身高-60；
这个。大小=数学。地板(出hei/50)；
这个。表黑=这个。尺寸* 50 像素；
这个。卷轴()；
},
stepScroll() {
const那个=这个
常数步长=50;
设num=0；
const tableBox=this .$ refs.tableBox
//改为全局定时器，且在调用前先进行清空
清除间隔(这个。步进时间)；
这个。步长时间=setInterval(function(){
that.stopSign=false
num=2；
如果（步骤数){
num=0；
清除间隔(即。步进时间)；
that.stopSign=true
}否则{
表格框。scroll top=2；
}
}, 1000/60);
},
卷轴(){
const那个=这个
const tableBox=this .$ refs.tableBox
const tableInner=this .$ refs.tableInner
清除间隔(这个。定时器)；
这个。timer=setInterval(function(){
//修改定时器结束判断条件
如果(表格框。滚动顶部=表格内部。滚动高度){
表格框。scroll top=0；
}
那个。步进滚动()；
}, 2000);
},
}
})
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。