时间戳

首页 > 解决方案 > 显示所有数据后如何停止渲染vue轮播组件

javascript - 显示所有数据后如何停止渲染vue轮播组件

问题描述

正如标题所说，我想在显示数据后或 x 秒后停止渲染 vue 轮播组件。我还没有找到任何与此相关的信息。我知道这样做很……很奇怪，但对于某些项目，我仍然想知道如何去做。这是代码：

        <div class="col-md-12 col-sm-12 col latest-news max-width">
              <carousel
                :per-page="1"
        :mouse-drag="false"
        :autoplay="true"
        :paginationEnabled="false"
        :loop="true"
        :speed="1500"
        :autoplayTimeout="7000"
      >
        <slide v-for="post in posts_1" :post="post" :key="post.id">
          <NewsTitle class="most-important" :post="post" :key="post.id" />
        </slide>
      </carousel>
    </div>

标签： javascriptvue.js

解决方案

这是你需要的吗？

<template>
    <carousel
        v-if="showCarousel"
        ...
    >
        ...
    </carousel>
</template>

<script>
export default {
    data: function(){
        return {
            showCarousel: true,
        }
    },
    methods: {
        hideCarousel: function(){
            setTimeout(() => {
                this.showCarousel = false;
            }, 5000);
        }
    },
    created: function(){
        this.hideCarousel();
    }
}
</script>

如果你想隐藏你的轮播，你应该依赖于showCarousel变量。您还需要为标签添加v-if="showCarousel"条件carousel。我的代码应该在 5000 毫秒或 5 秒后隐藏轮播。

推荐阅读