vue无限滚动多次请求数据,vue列表循环滚动
这篇文章主要为大家详细介绍了某视频剪辑软件实现无限消息无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现无限消息无缝滚动的具体代码，供大家参考，具体内容如下
一、html
div class=table_box
div class=表标题
div class=table_title_item 告警时间/div
div class=table_title_item 所属集中器/div
div class= table _ title _ item style= width:40% 内容/div
/div
div class=table_content
div:class= { anim:animate } @ mouse enter= Stop() @ mouse leave= Up()
div class= table _ item v-for=(item，index) in chart4 :key=index
table _ column :title= item。wtime“{ item。wtime } }/div
div class= table _ column :title= item。终端名称“{ item。终端名称} }/div
table _ column 2 :title= item。备注“{ item。备注} }/div
/div
/div
/div
/div
二、style。表格_框{
填充：10px
}。表_标题_项目{
宽度：30%;
高度：28px
颜色：# fff
颜色：# 01C0C3
字体大小：14px
行高：28px
文本对齐：居中；
}。表格_内容{
保证金：5px
身高：28vh
溢出：隐藏；
}。table_item{
宽度：100%;
//设定行高
高度：30px
行高：30px
显示器：flex
颜色：# 01C0C3
字体大小：14px
}。动画{
//设定滚动
过渡：全0.5s
边距-顶部：-30px；//高度等于行高
}。表格_列{
宽度：30%;
文本对齐：居中；
//多出部分省略
溢出：隐藏；
文本溢出：省略号；
显示：-WebKit-box；
-WebKit-line-clamp:1；//行数
-webkit-box-orient:垂直；
}。表_列2 {
宽度：40%;
文本对齐：居中；
//多出部分省略
溢出：隐藏；
文本溢出：省略号；
显示：-WebKit-box；
-WebKit-line-clamp:1；//行数
-webkit-box-orient:垂直；
}
三、js
脚本
导出默认值{
data() {
返回{
//告警滚动部分
图表4: [],
动画：假，
intNum:未定义
}
},
已创建(){
this.getAlarmDatas()
},
方法：{
//获取报警数据
getAlarmDatas() {
getAlarmInfo().然后(res={
if(RES . code===1 RES . data。长度0){
this.chart4=res.data
这个ScrollUp()
}
})
},
/** 告警滚动部分*/
ScrollUp() {
//每次滚动时先清除上次定时器
这个。停止()
让那个=这个
这个。int num=setInterval(function(){
that.animate=true //向上滚动的时候需要添加css3过渡动画
setTimeout(()={
那个。图表4。推(那个。图表4[0])//将数组的第一个元素添加到数组的
that.chart4.shift() //删除数组的第一个元素
that.animate=false
}, 500)
}, 2000)
},
//鼠标移上去停止
Stop() {
clearInterval(this.intNum)
},
//鼠标移出
Up() {
这个ScrollUp()
}
}
}
/脚本
四、效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。