vue 滚动显示,
这篇文章主要为大家详细介绍了某视频剪辑软件实现竖屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现竖屏滚动公告效果的具体代码，供大家参考，具体内容如下
html文件
模板
div class=scroll-wrap
差异
滚动内容
:style="{ top } "
@mouseenter=Stop()
@mouseleave=Up()
p v-for=报告列表中的项目
恭喜{ {项目。类名} } { { item。用户名} }晋级为{{ item.level }}
/p
/div
/div
/模板
javascript文件
已创建(){
这个。getreportlist()；
这个.向上滚动()；
},
计算值：{
top() {
返回-这个。activeindex * 30 px
},
},
方法：{
//查询晋级名单
getReportList() {
var vm=this
虚拟机.$axios。get(/person result/selectImprovementList )。然后（函数（响应){
如果(回应。数据。code=== 0000 ){
VM。报告列表=响应。数据。数据；
} else if(响应。数据。code=== 1111 ){
虚拟机.$message({
消息：response.data.message
类型：警告，
});
}
});
},
//滚动播报方法
ScrollUp() {
this.intnum=setInterval((_)={
如果(这个。主动索引此。报告列表。长度){
这个。主动指数=1；
}否则{
这个。活跃指数=0；
}
}, 1000);
},
Stop() {
清除间隔(这个。int num)；
},
Up() {
这个.向上滚动()；
},
}
css文件。滚动包装{
位置：相对；
z指数：2;
浮动：左；
左边距：5%;
溢出：隐藏；
}。滚动内容{
位置：相对；
过渡：前0.5s
}。滚动内容p {
/* 每行信息间隔高度*/
行高：30px
字体大小：20px
颜色：黄色；
文本对齐：居中；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。