私は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>
vueを使用する場合は、DOMを直接操作しないようにする必要があります。
v-bind:classtransition/ transition-group）を使用できます.trending-articles-namesサンプルコードなど）、v-forそれらを使用して作成できますvueに純粋に実装された非常に単純なカルーセル
は次のようになります:(コードペンはここから入手できます）
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のカルーセルに使用できる優れたライブラリがいくつかあります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加