1.jQuery 时候实现 上下滚动很简单，基本上一个animateTop就可以了
2. vue等MVVM就有些麻烦了，因为不推荐操作DOM，专注于数据
我们可以使用
css3 transition: top 0.5s; 和改变列表的位置来实现上下文无缝滚动。下图顶部的黄字应该是滚动的（不会弄gif图~）
效果：
代码如下:
<template>
<div>
<div class="noticeWrap" v-if="this.data.messageList.length>0">
<div class="notice">
<ul :class="animate? 'anim':''" :style="{top}">
<li v-for="(item,index) in data.messageList" :key="index"><a @click="alertMessage(index)">{{item.alertMessageTitle}}</a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
data:{
messageList:[]
/*可以用假数据测试
"messageList":[
{
"alertMessageTitle":"民生银行系统维护, 首付出发暂停民生银行卡还款1",
"alertMessageContent":"1尊敬的首付出发用户：由于民生银行目前处于系统维护中，维护期间首付出发支付、还款业务暂不支持民生银行卡，为保证您的还款不受影响，请使用其他银行卡进行主动还款，给您带来不便，敬请谅解~"
},
{
"alertMessageTitle":"民生银行系统维护, 首付出发暂停民生银行卡还款2",
"alertMessageContent":"2尊敬的首付出发用户：由于民生银行目前处于系统维护中，维护期间首付出发支付、还款业务暂不支持民生银行卡，为保证您的还款不受影响，请使用其他银行卡进行主动还款，给您带来不便，敬请谅解~"
},
{
"alertMessageTitle":"民生银行系统维护, 首付出发暂停民生银行卡还款3",
"alertMessageContent":"3尊敬的首付出发用户：由于民生银行目前处于系统维护中，维护期间首付出发支付、还款业务暂不支持民生银行卡，为保证您的还款不受影响，请使用其他银行卡进行主动还款，给您带来不便，敬请谅解~"
},
{
"alertMessageTitle":"民生银行系统维护, 首付出发暂停民生银行卡还款4",
"alertMessageContent":"4尊敬的首付出发用户：由于民生银行目前处于系统维护中，维护期间首付出发支付、还款业务暂不支持民生银行卡，为保证您的还款不受影响，请使用其他银行卡进行主动还款，给您带来不便，敬请谅解~"
}
]
*/
},
activeIndex: 0,
animate:true,
}
},
created(){
this.getIndex();
},
computed: {
top() {
return - this.activeIndex * 30 + 'px'; //每次动画改变这个列表的位置
}
},
methods:{
getIndex(){
//你的ajax code返回结果
if(response.data.success){
//console.log( this.data)
this.data=response.data.data;
//数据是后台动态读取，所以应该在数据可用时再弄动画，你也可以直接把假数据放在 messageList里
if(this.data.messageList.length>0){
this.scroll();
}
}else{
alert(response.data.msg);
}
},
scroll(){
let intval=setInterval(()=> {
if(this.activeIndex < this.data.messageList.length-1) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
if(this.data.messageList.length==0){
this.activeIndex = 0;
clearInterval(intval);
}
}
}
}
</script>
<style>
.anim{
transition: top 0.5s;
position: relative;
}
</style>