一个滚屏的VUE组件，上下滚动的说。 组件源码：

<!--
 * @info: 文件说明：主要功能介绍等
 * @Description: 全局功能介绍和注意事项
 * @Author: tt
 * @Date: 2021-03-30 17:00:29
 * @LastEditTime: 2021-03-30 18:18:25
 * @LastEditors: tt
-->
<template>
	<!-- 无缝滚动效果 -->
	<router-link :to="'/into'">
		<div class="marquee-wrap">
			<ul class="marquee-list" :class="{'animate-up': animateUp}">
				<li v-for="(item, index) in listData" :key="index">{{item}}</li>
			</ul>
		</div>
	</router-link>
</template>
<script>
	export default {
		name: "marquee-up",
		data() {
			return {
				animateUp: false,
				listData: ['Admin来到了txwb',
				'Admin发布了一个新帖',
				'Admin删除了一个帖',
				'网吧菜鸟发布了一个新帖',
				],
				timer: null
			}
		},
		mounted() {
			this.timer = setInterval(this.scrollAnimate, 2000);
		},
		methods: {
			scrollAnimate() {
				this.animateUp = true
				setTimeout(() => {
					this.listData.push(this.listData[0])
					this.listData.shift()
					this.animateUp = false
				}, 500)
			}
		},
		destroyed() {
			clearInterval(this.timer)
		}

	};
</script>
<style lang="scss" scoped>
	.marquee-wrap {
	  position: fixed;
	  bottom: 10px;
	  right: 10px;
	  height: 40px;
	  border-radius: 4px;
	  background: rgba($color: #000000, $alpha: 0.6);
	  overflow: hidden;
	  padding: 0;
	  .marquee-list {
	    margin-top: -1px;
	    li {
	      padding: 0;
	      width: 100%;
	      height: 100%;
	      text-overflow: ellipsis;
	      overflow: hidden;
	      white-space: nowrap;
	      list-style: none;
	      line-height: 40px;
	      text-align: center;
	      color: #fff;
	      font-size: 18px;
	      font-weight: 400;
	    }
	  }
	  .animate-up {
	    transition: all 0.5s ease-in-out;
	    transform: translateY(-40px);
	  }
	}
	.hideSidebar {
	  /* 左边侧栏隐藏 */
	  .marquee-wrap {
	    left: 65px;
	    bottom: 10px;
	    right: 10px;
	  }
	}
	.openSidebar {
	  /* 左边侧栏打开状态 */
	  .marquee-wrap {
	    left: 210px;
	  }
	}
</style>

调用源码：

<MarqueeUp />