单行文字向上滚动

lx1036 发布于2019-08-29 16:15 / 3056人阅读

摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。

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

效果如下：

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

html代码如下：

 
   
   
     
       {{item.phone}}抽中{{item.prizeName}}
       {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
       {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
       获奖公告

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.滚动到底部返回时加了个延迟，是为了能滚动到最后一个，然后从最后一个返回到第一个。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113627.html

单行文字向上滚动

摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 废话不多说，下面直接贴上代码。 html代码如下： ...

AlienZHOU 2019-08-23 10:42 评论0 收藏0
单行文字向上滚动

摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 废话不多说，下面直接贴上代码。 html代码如下： ...

yuanzhanghu 2019-08-02 11:07 评论0 收藏0
单行文字垂直/水平跑马灯效果

摘要：需求描述接到的需求是这样的跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。需求描述接到的需求是这样的：跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。静态效果如下图，文字从下往上或者从右往左滚动，滚动到此位置时停留一秒（不会传动图...showImg(https://segmentfault.com/img/bVbbZ3v?w=700&h=...

muzhuyu 2019-08-26 12:01 评论0 收藏0
js信息滚动

摘要：信息滚动效果学习函数实现信息滚动相关知识点滚动的方式表示在两端之间来回滚动。表示由一端滚动到另一端，会重复。间歇性向上滚动效果展示将样式中的盒子高度设置成单行高本例为则显示一行，并间歇性向上滚动，效果展示信息滚动效果学习 marquee函数实现信息滚动相关知识点： 1.behavior滚动的方式 alternate:表示在两端之间来回滚动。 scroll:表示由一端滚动到另一端，会...

苏丹 2019-08-21 17:01 评论0 收藏0