我们用css和来实现,核心在于transition属性的使用,该属性的具体用法可以自行搜索,我们直接上代码
布局部分:
<div class="scroll">
<van-row class="background" type="flex" justify="space-between">
<van-col span="2" style="height: 40px">
<van-image style="width: 20px;height: 20px;margin-top: 10px;margin-left: 12px" radius fit="cover" :src="require('../../../assets/image/ic_notice.png')"></van-image>
</van-col>
<van-col span="21">
<ul id="ulll" :class="{ anim: animate == true }">
<li v-for="(item, index) in items" :key="index">
<van-row type="flex" justify="space-between">
<van-col span="5" class="single_line">
{{"["+ item.userName + "]" }}
</van-col>
<van-col span="13" class="single_line" align="center">
{{$t('chenggonggoumai_nft')}}
</van-col>
<van-col span="6" style="color: #35C79B;padding-right: 8px" class="single_line" align="end">
{{ item.time + $t('fenzhongqian') }}
</van-col>
</van-row>
</li>
</ul>
</van-col>
</van-row>
</div>
js部分:
export default {
name: "NoticeScorll",
data(){
return{
animate: false,
items: [
{userName:'小明',time:1},
{userName:'小明1',time:2},
{userName:'小明2',time:3},
],
}
},
created() {
this.getScrollMessage()
},
methods: {
scroll() {
this.animate = true; // 为true时将动画样式赋值给布局,见布局处引用
setTimeout(() => {
// 这里直接使用了es6箭头写法,省去了处理this指向偏移问题
this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
this.items.shift(); //删除数组的第一个元素
this.animate = false; // margin-top为0的时候取消过渡动画,实现无缝滚动
}, 500);//每条滚动时长0.5s
},
getScrollMessage(){
//这里用网络请求替换真实数据,把下面的代码放到响应成功的线程里
setInterval(this.scroll, 2000);
},
},
}
css部分(关键):
.scroll {
/*几个高度要一致*/
height: 40px;
font-family: SourceHanSansSC-Regular;
font-size: 10px;
font-weight: normal;
font-stretch: normal;
line-height: 0vw;
letter-spacing: 0vw;
color: #666666;
overflow: hidden;
}
.anim {
transition: all 0.5s;
/*几个高度要一致*/
margin-top: -40px;
}
#ulll li {
list-style: none;
/*几个高度要一致*/
line-height: 40px;
/*几个高度要一致*/
height: 40px;
}
.background{
background: #FFFFFF;
border-radius: 8px;
height: 40px;
}
.single_line {
white-space:nowrap; /*溢出不换行*/
text-overflow: ellipsis;
overflow:hidden;/*溢出部分隐藏*/
line-clamp:1;
-webkit-line-clamp:1; /*显示的行数*/
}
布局处用了vant的layout栅格布局(van-row、van-col),方便横向排布,不愿意用vant的可以用css手写样式。