我们用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手写样式。
