如何实现单行文字向上滚动的效果（附代码）

来源：动视网责编：小采时间：2020-11-27 18:47:48

如何实现单行文字向上滚动的效果（附代码）

如何实现单行文字向上滚动的效果（附代码）:这篇文章给大家介绍的内容是关于如何实现单行文字向上滚动的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下：废话不多说，下面直接贴上代码。

推荐度：

点击下载本文 文档为doc格式

导读如何实现单行文字向上滚动的效果（附代码）:这篇文章给大家介绍的内容是关于如何实现单行文字向上滚动的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下：废话不多说，下面直接贴上代码。

这篇文章给大家介绍的内容是关于如何实现单行文字向上滚动的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。

效果如下：

废话不多说，下面直接贴上代码。

html代码如下：

 <div class="notice">
 <img src="./img/notice.png" alt="">
 <div class="wrap">
 <ul :style="{top: noticeTop + 'rem'}" :class="{transitionTop: isActive}">
 <li v-for="(item, index) in noticeList" :key="index">{{item.phone}}抽中{{item.prizeName}}</li>
 <li v-if="noticeLen > 0">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
 <li v-if="noticeLen === 1">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
 <li v-if="noticeLen === 0">获奖公告</li>
 </ul>
 </div>
 </div>

less代码如下：

 .notice{
 display: flex;
 justify-content: center;
 padding-bottom: .26rem;
 img{
 width: .3rem;
 height: .24rem;
 }
 .wrap{
 position: relative;
 height:.3rem;
 overflow: hidden;
 margin-left: .15rem;
 font-size: .24rem;
 color: #391b03;
 }
 ul{
 position: relative;
 top: -.3rem;
 li{
 height: .3rem;
 line-height: .3rem;
 }
 }
 .transitionTop{
 transition: top 200ms ease-in-out;
 }
 }

js代码如下：

 // data下
 noticeTop: 0, // 公告top值
 isActive:true, // 是否显示transitionTop动画
 timer: null, // 公告滚动定时器
 noticeList: [
 {
 phone:'135****1234',
 prizeName:'50元还款券'
 },
 {
 phone:'135****1234',
 prizeName:'60元还款券'
 },
 {
 phone:'135****1234',
 prizeName:'70元还款券'
 }
 ], // 公告列表
 
 // computed下
 noticeLen(){ // 公告列表长度
 return this.noticeList.length;
 }
 //methods下
 noticeScroll(){// 公告滚动，定时改变公告的top值
 if(this.noticeLen > 0){
 let index =1,
 len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
 this.timer = setInterval(() => {
 this.isActive = true;
 this.noticeTop = -3 * index / 10;
 index ++;
 if(index === len){// 滚动到底部时返回
 let delayTime = setTimeout(() => {
 this.isActive = false;
 this.noticeTop = 0;
 index = 1;
 clearTimeout(delayTime);
 }, 1000);
 }
 }, 3000);
 }
 }
 //调用
 this.noticeScroll();

需要说明的是：
1.项目是基于vue的语法
2.滚动到底部返回时加了个延迟，是为了能滚动到最后一个，然后从最后一个返回到第一个。

如何实现单行文字向上滚动的效果（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：文字实现滚动

热门焦点

如何实现单行文字向上滚动的效果（附代码）

如何实现单行文字向上滚动的效果（附代码）

如何实现单行文字向上滚动的效果（附代码）

最新推荐

猜你喜欢

热门推荐