vue 信息滚动循环播放显示

vue 信息滚动循环播放显示_vue 滚播放_不想学习只想玩的博客-CSDN博客

<ul class="buoy" >
    <li v-for="(item, index) in contentList.buoyList" 
    :key="index" :class="{'animate-up': animateUp}">
    <!-- 这里放内容 -->
    </li>
</ul>

data() {
    return {
    contentList: {
                buoyList: [
                    //内容
                ],
            },
        animateUp: false,
        timer:'',     // 定时器
        }
},
mounted() {
    this.timer = setInterval(this.scrollAnimate, 2500);
}    

methods: {
        scrollAnimate() {
            this.animateUp = true
            setTimeout(() => {
                this.contentList.buoyList.push(this.contentList.buoyList[0])
                this.contentList.buoyList.shift()
                this.animateUp = false
            }, 2000)
        },
 }

.buoy {
    width: 340px;
    height: calc(59% - 33px);
    overflow: hidden;  //超出的部分隐藏
}
/* li组件内容循环播放 */
.animate-up {
    transition: all 2s ease-in-out;
    transform: translateY(-100px);  //向上滚动
}