vue热点新闻轮动

html

<div class="news" v-bind:class="{ active: isActive }">
    <i class="fl"></i>
    <div class="scroll-wrap news_con">
        <img src="../../assets/images/icon/laba.png">
                                    //style计算属性控制，设置动画
        <ul class="scroll-content" :style="{ top, transition  }">
            <li v-for="item in homeres.forumList" @click="forumitemclick(item)">{{item.title}}</li >
        </ul>
    </div>
    <i class="fr" style="margin-right: 10px;" @click="close">x</i>
</div>

script

computed: {
        top() {
            return - this.activeIndex * 40 + 'px';
        },
        transition() {
            return this.activeIndex === 0 ? 'none' : 'top 1s';
        }
    },
methods:{
        //设置定时器
    initforumscroll(){
            setInterval(_ => {
                if(this.activeIndex < this.homeres.forumList.length - 1) {
                    this.activeIndex += 1;
                }else {
                    this.activeIndex = 0;
                }
            }, 3000);
        }
}

效果
每过一秒，向上轮动一个li的高度