vue实现竖屏滚动公告效果
作者：张艳伟_Laura
这篇文章主要为大家详细介绍了vue实现竖屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现竖屏滚动公告效果的具体代码，供大家参考，具体内容如下
html文件
<template>
<div class="scroll-wrap">
<div
class="scroll-content"
:style="{ top }"
@mouseenter="Stop()"
@mouseleave="Up()"
>
<p v-for="item in reportList">
恭喜{{ item.className }}{{ item.userName }}晋级为{{ item.level }}
</p>
</div>
</div>
</template>javascript文件
created(){
this.getReportList();
this.ScrollUp();
},
computed: {
top() {
return -this.activeIndex * 30 + "px";
},
},
methods: {
//查询晋级名单
getReportList() {
var vm = this;
vm.$axios
.get("/personResult/selectImprovementList")
.then(function (response) {
if (response.data.code === "0000") {
vm.reportList = response.data.data;
} else if (response.data.code === "1111") {
vm.$message({
message: response.data.message,
type: "warning",
});
}
});
},
//滚动播报方法
ScrollUp() {
this.intnum = setInterval((_) => {
if (this.activeIndex < this.reportList.length) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
},
Stop() {
clearInterval(this.intnum);
},
Up() {
this.ScrollUp();
},
}css文件
.scroll-wrap {
position: relative;
z-index: 2;
float: left;
margin-left: 5%;
overflow: hidden;
}
.scroll-content {
position: relative;
transition: top 0.5s;
}
.scroll-content p {
/* 每行信息间隔高度 */
line-height: 30px;
font-size: 20px;
color: yellow;
text-align: center;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。