vue 内容循环滚动

最新推荐文章于 2024-07-29 11:08:22 发布

逸曦穆泽

最新推荐文章于 2024-07-29 11:08:22 发布

阅读量1.7k

点赞数 2

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/qq_41408081/article/details/119343162

版权

web前端专栏收录该内容

65 篇文章 2 订阅

订阅专栏

哈啰！这个是使用定时器实现的滚动！

看看效果图：

样式与内容

<style>
	.blog_news_gossip{height:320px;text-align: center;padding:30px 15px;}
	.blog_news_gossip .blog_news_tle{font-size: 20px;font-weight: bold;margin:0 20px 10px;}
	.blog_news_gossip .blog_news_scroll{height:225px;margin:auto;overflow:hidden;}
	.blog_news_gossip .blog_news_scroll .blog_news_box{padding:0 20px;margin: 0;}
	.blog_news_gossip .blog_news_scroll .blog_news_box p{margin:3px auto;color:#ffcc66;}
</style>
<template>
<div class="blog_news_gossip">
	<p class="blog_news_tle">闲言碎语</p>
	<div class="blog_news_scroll" id="scroll">
		<div class="blog_news_box" id="content">
			<p>生活,本就是一场修行</p>
			<p>什么喜怒哀乐</p>
			<p>什么柴米油盐</p>
			<p>什么酸甜苦辣</p>
			<p>痛苦中的坚强与崩溃</p>
			<p>快乐中的喜悦与沉溺</p>
			<p>不知道你是否在思考</p>
			<p>人生，就是一场旅行</p>
			<p>没有方向</p>
			<p>没有来回</p>
			<p>没有目的</p>
			<p>故事一直在编，凡事打个半折</p>
			<p>得失的心态就不会那么重</p>
			<p>是风还是雨，可能就是个段子</p>
			<p>都说凡事不过三，可是有的事，一次就够了</p>
			<p>不知从何时起，变得了安静</p>
			<p>不知从何处起，热切了孤独</p>
			<p>没有考虑过要获得什么，又何来失去什么</p>
			<p>谁也不知道意外和明天哪个先来</p>
			<p>我曾跨过山巅，也曾走过低谷</p>
			<p>二者都令我受益良多</p>
			<p>人生本是生活的影子</p>
			<p>情绪这个感觉很奇妙</p>
			<p>却有控制与放纵的人</p>
			<p>生活依旧，人生共勉，黎明的色彩才会迷人</p>
			<p>早起早睡，年轻人</p>
			<br>
		</div>
		<div class="blog_news_box" id="copyContent"></div>
	</div>
</div>
</template>

重点，用笔记下

<script>
	export default {
		data() {
			return{}
		},
		mounted: function () {
			this.initContent();
		},
		methods: {
			initContent(){
				var scroll = document.getElementById("scroll");
				var content = document.getElementById("content");
				var copyContent = document.getElementById("copyContent");
				copyContent.innerHTML = content.innerHTML;
				setInterval(function () {
					//scrollTop 滚动的距离 offsetTop当前元素离顶部的距离
					if (scroll.scrollTop >= copyContent.offsetTop - content.offsetTop) {
						scroll.scrollTop = 0;
					}
					scroll.scrollTop++;
				}, 60);
			}
		}
	}
</script>

当然，也可以使用 setup 函数

<script>
	import { onMounted } from 'vue'
    export default {
	    setup() {
            onMounted(()=>{
                var scroll = document.getElementById("scroll");
				var content = document.getElementById("content");
				var copyContent = document.getElementById("copyContent");
				copyContent.innerHTML = content.innerHTML;
				setInterval(function () {
					//scrollTop 滚动的距离  offsetTop当前元素离顶部的距离
					if (scroll.scrollTop >= copyContent.offsetTop - content.offsetTop) {
						scroll.scrollTop = 0;
					}
					scroll.scrollTop++;
				}, 60)     
            });
	    },
    }
</script>

OK，往往最朴素的方法最为致命，可以自己去封装插件了！