Vue 动态数据滚动

最新推荐文章于 2024-05-22 13:52:22 发布

风叶翩翩

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量1.7k

点赞数 5

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103195269

版权

本文介绍了如何在Vue中实现动态数据的上下滚动效果。通过设置固定样式框架、动态变化的内容和向上滚动的动画，展示了具体的效果和代码实现。同时提供了整体代码演示，帮助读者更好地理解和应用。

摘要由CSDN通过智能技术生成

使用Vue动态滚动（上下滚动）显示将要展示的讯息。

代码分析：
1.设置固定样式的框架内容
2.设置红色字体内容是动态变化的
3.滚动效果为向上滚动

效果演示：

此效果图的数据是不停滚动变化的
在这里插入图片描述
第二张效果图

代码演示：

注意：引入vue.min.js架包

CSS样式

<style>
div, ul, li, span, img {
   
	margin: 0;
	padding: 0;
	display: flex;
	box-sizing: border-box;
}
.marquee {
   
	width: 100%;
	height: 50px;
	align-items: center;
	color: #3A3A3A;
	background-color: #b3effe;
	display: flex;
	box-sizing: border-box;
}

.marquee_title {
   
	padding: 0 20px;
	height: 30px;
	font-size: 14px;
	border-right: 1px solid #d8d8d8;
	align-items: center;
}

.marquee_box {
   
	display: block;
	position: relative;
	width: 60%;
	height: 30px;
	overflow: hidden;
}

.marquee_list {
   
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.marquee_top {
   
	transition: all 0.5s;
	margin-top: -30px
}

.marquee_list li {
   
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	padding-left: 20px;
}

.marquee_list li span {
   
	padding: 0 2px;
}

.red {
   
	color: #FF0101;
}

</style>

Body内容

<body>

<div class="vueBox">
    <div class=

最低0.47元/天解锁文章

风叶翩翩

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue 动态数据滚动

使用Vue动态滚动（上下滚动）显示将要展示的讯息。代码分析：1.设置固定样式的框架内容2.设置红色字体内容是动态变化的3.滚动效果为向上滚动效果演示：此效果图的数据是不停滚动变化的第二张效果图代码演示：注意：引入vue.min.js架包CSS样式<style>div, ul, li, span, img { margin: 0; padding: 0...
复制链接

扫一扫

专栏目录