您现在的位置: 天下网吧 >> 网吧天地 >> 网吧程序 >> 前端开发 >> 正文

VUE滚动公告,向上跑马灯效果源码

[ 作者:VUE 来源: 天下网吧 时间:2021-3-31我来说两句

一个滚屏的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 />


欢迎访问最专业的网吧论坛,无盘论坛,网吧经营,网咖管理,网吧专业论坛 https://bbs.txwb.com

关注天下网吧微信/下载天下网吧APP/天下网吧小程序,一起来超精彩


本文来源:天下网吧 作者:VUE

相关文章
没有相关文章
声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系邮箱:[email protected],本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧 网吧天下