console
new Vue({
el: "#app",
data() {
return {
scroll_data: [
{
tag: "重点人物",
detail: "重点人物张东于2021月5月7月活跃",
redirect: "",
},
{
tag: "大规模事件",
detail: "XXX事件(2021年5月3日)超过50人",
redirect: "",
},
{
tag: "疑似串联",
detail: "XXX事件发生神奇的串联",
redirect: "",
},
{
tag: "异常购票",
detail: "XXX购了很多次火车票",
redirect: "",
},
{
tag: "涉及范围广",
detail: "XXX涉及湖南湖北江苏三省",
redirect: "",
},
{
tag: "敏感时间",
detail: "张三在国庆节购买硫酸",
redirect: "",
},
],
top: 0,
timer: "",
time: 1000,
};
},
methods: {
scrollPrepare() {
if (this.scroll_data.length >= 5) {
this.scroll_data = this.scroll_data.concat(
this.scroll_data.slice(0, 4)
);
}
},
scrollFn() {
this.$refs.scroll_ul.style.transition = `top ${this.time}ms linear`;
this.top -= 30;
if (this.top <= -(this.scroll_data.length - 4) * 30) {
setTimeout(() => {
this.$refs.scroll_ul.style.transition = "none";
this.top = 0;
return (this.$refs.scroll_ul.style.top = this.top + "px");
}, this.time - 20);
}
this.$refs.scroll_ul.style.top = this.top + "px";
},
scrollList() {
if (this.scroll_data.length >= 5) {
this.timer = setInterval(this.scrollFn, this.time);
this.$once("hook:beforeDestory", () => {
clearInterval(this.timer);
});
}
},
stopScroll() {
clearInterval(this.timer);
},
continueScroll() {
this.scrollList();
},
hanldeVisiblityChange() {
if (document.visibilityState === "hidden") {
clearInterval(this.timer);
} else if (document.visibilityState === "visible") {
this.scrollList();
}
},
},
created() {
this.scrollPrepare();
},
mounted() {
this.scrollList();
window.addEventListener("visibilitychange", this.hanldeVisiblityChange);
this.$once("hook:beforeDestory", () => {
window.removeEventListener(this.hanldeVisiblityChange);
});
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<div class="early_warning">
<div>
<div class="scroll_wrap">
<ul class="scroll" ref="scroll_ul" @mouseover="stopScroll" @mouseleave="continueScroll">
<li v-for="(data, index) in scroll_data" :key="index">
{{ data.detail }}
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
.early_warning {
padding: 20px;
background-color: pink;
}
.early_warning div.scroll_wrap {
max-height: 120px;
overflow: hidden;
}
.early_warning div.scroll_wrap ul.scroll {
margin: 0;
position: relative;
display: flex;
flex-direction: column;
list-style-type: none;
top: 0;
transition: top 1000ms linear;
}
.early_warning div.scroll_wrap ul.scroll li {
font-size: 14px;
line-height: 30px;
}