vue 信息滚动循环播放显示

最新推荐文章于 2024-03-14 18:01:56 发布

不想上班只想要钱

最新推荐文章于 2024-03-14 18:01:56 发布

阅读量914

点赞数

分类专栏： css html 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Aa12364567/article/details/126779307

版权

前端同时被 3 个专栏收录

150 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

大屏幕信息内容滚动循环播放显示

<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);  //向上滚动
}