前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue实现滚动显示跑马灯效果

vue实现滚动显示跑马灯效果

原创
作者头像
安德玛
发布2022-03-08 17:26:06
1.4K0
发布2022-03-08 17:26:06
举报
文章被收录于专栏:Cordova封装H5 APP
效果图
实现步骤

marquee标签的使用

marquee的css样式

代码语言:javascript
复制
marquee {
	     display: block;
	     width: 95%;
	     height: calc(100vh - 600px);
	     margin: 0px auto 0;
}

html代码

代码语言:javascript
复制
<div class="members">
		  <marquee direction="up" scrollamount="3">
		    <p v-for="(item, index) in userDynamic" :key="index">
		      <span>{{ item.mobile }}</span>
		      <span class="fx">{{ item.content }}</span>
		      <span class="fr">{{ item.t}}</span>
		    </p>
		  </marquee>
		</div>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 实现步骤
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档