SOURCE

console 命令行工具 X clear

                    
>
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,方便之后清除定时器
            timer: "",
            time: 1000, //控制滚动所需的时间
        };
    },
    methods: {
        //#region 头条预警模块
        //=== 滚动准备 ===
        // 拷贝tagList的前四份放在tagList的最后面
        scrollPrepare() {
            // 拷贝 如果数据大于等于5 才进行拷贝
            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) {
                //清除过渡 并将top值设置为0
                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";
        },

        // BUG 存在很严重的问题
        //=== 实现滚动功能 ===
        scrollList() {
            // 如果数据大于等于5,则滚动
            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();
            }
        },
        //#endregion 头条预警模块
    },

    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;
}