vue or react mvvm里的文字上下滚动

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>