摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。
最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。 效果如下：
废话不多说，下面直接贴上代码。
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代码如下： ...
摘要：需求描述接到的需求是这样的跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。 需求描述 接到的需求是这样的：跑马灯效果 一次展示一行文字 循环滚动 文字滚动到视野中停留一秒后滚出。静态效果如下图，文字从下往上或者从右往左滚动，滚动到此位置时停留一秒（不会传动图...showImg(https://segmentfault.com/img/bVbbZ3v?w=700&h=...
阅读 2385·2021-11-24 10:18
阅读 3492·2021-09-22 15:35
阅读 3426·2021-09-13 10:37
阅读 3853·2021-09-06 15:14
阅读 2124·2021-09-06 15:02
阅读 2305·2021-09-02 15:11
阅读 601·2019-08-30 15:53
阅读 3131·2019-08-29 16:15
