Question

我是Vue.js的新手，所以我不确定正确执行此任务的正确方法。我正在寻找一个滑块，该滑块每隔4秒钟用设置的间隔替换一次图像。现在它可以正常工作，但是我想使用Vue.js的全部功能来实现此目标。我也想知道在卸载间隔时应该如何终止间隔，以避免内存泄漏。

    <template>
    <div class="trending col-4">
        <div class="trending-div">
            <h1 class="headline">Trending</h1>
            <div class="trending-articles">
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number activeButton">1</p>
                    <p class="trending-articles-names-articleTitle activeBold">Lorem ipsum </p>
                </div>
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number">2</p>
                    <p class="trending-articles-names-articleTitle">Lorem, ipsum </p>
                </div>
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number">3</p>
                    <p class="trending-articles-names-articleTitle">Lorem ipsum </p>
                </div>
            </div>
            <div class="trending-carousel">
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image active"></div>
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data: function() {
            return {
                counter: 0,

            }
        },
        mounted: function() {
            let carouselImages = document.querySelectorAll('.trending-carousel-image');
            let buttons = document.querySelectorAll('.trending-articles-names-number');
            let title = document.querySelectorAll('.trending-articles-names-articleTitle');
            setInterval(() => {
                carouselImages[this.counter].classList.remove("active")
                buttons[this.counter].classList.remove("activeButton")
                title[this.counter].classList.remove("activeBold")
                if(this.counter === 3) {
                    carouselImages[0].classList.add("active");
                    buttons[0].classList.add("activeButton");
                    title[0].classList.add("activeBold");
                    this.counter = 0;
                }else {
                    carouselImages[this.counter+1].classList.add("active");
                    buttons[this.counter+1].classList.add("activeButton");
                    title[this.counter+1].classList.add("activeBold");
                    this.counter++;
                }
            },4000);
        }
    }
</script>

Answer 1

使用vue时，应避免直接操纵dom。

如果要动态添加/删除类到元素，可以使用object syntax for v-bind:class
如果需要动画/转场，可以使用Vue transitions（transition / transition-group）
如果您有许多相似的元素（例如示例代码中的.trending-articles-names），则可以使用v-for为您创建它们

一个纯粹在vue中实现的非常简单的轮播可能看起来像这样：
（可使用here的Codepen）

new Vue({
  el: '#root',
  data: function() {
    return {
      articles: [{
        name: "Lorem Ipsum",
        image: "https://via.placeholder.com/300x50.png/FF0000/FFFFFF?text=First"
      }, {
        name: "Lorem Ipsum 2",
        image: "https://via.placeholder.com/300x50.png/00FF00/FFFFFF?text=Second"
      }, {
        name: "Lorem Ipsum 3",
        image: "https://via.placeholder.com/300x50.png/0000FF/FFFFFF?text=Third"
      }],
      activeImage: 0,
      interval: null
    }
  },
  mounted() {
    this.interval = setInterval(this.next, 5000);
  },
  destroyed() {
    // remember to clear the interval once the component is no longer used
    clearInterval(this.interval);
  },
  methods: {
    prev() {
      this.activeImage--;
      if (this.activeImage < 0)
        this.activeImage = this.articles.length - 1;
    },
    next() {
      this.activeImage++;
      if (this.activeImage >= this.articles.length)
        this.activeImage = 0;
    },
    pic(article) {
      console.log("CLICKED ON", article);
    }
  }
});

.carousel {
  overflow: hidden;
  width: 300px;
  display: flex;
}

.carousel img {
  transition: transform 0.5s ease;
}

button {
  margin: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div class="trending col-4">
    <div class="trending-div">
      <div class="trending-articles">
        <div v-for="(article, idx) in articles" :key="idx" class="trending-articles-names" @click="activeImage = idx">{{article.name}}</div>
      </div>
      <div class="carousel">
        <img v-for="(article, idx) in articles" :key="idx" @click="pic(article)" :src="article.image" :style="{transform: `translateX(-${activeImage * 100}%)`}" />
      </div>
      <button type="button" @click="prev">PREV</button>
      <button type="button" @click="next">NEXT</button>
    </div>
  </div>
</div>

我还是建议在生产项目中使用预制的传送带组件。
在Vue中，有几个很好的可用于轮播的库，例如：

Vuetify Carousels（Vuetify是基于材料设计的vue框架）
vue-carousel（轻型轮播组件）
bootstrap-vue carousel（基于boostrap）

如何使用Vue.js来实现？

1 个答案: