Vue Fade-slider Code

ライブラリを書かないように努力しながら、イメージスライダを作りました.実際には使われていません.ページングに失敗しました....)うっとうしい

Code

<template>
    <div class="mainBanner">
        <div class="sliderContainer">
            <div
                v-for="(img, index) in imageList"
                :key="img.id"
                :style="{
                    backgroundImage: `url(${img.imgSrc})`,
                    zIndex: `${
                        index === currentIndex ? 3 : index === lastIndex ? 2 : 1
                    }`
                }"
                :class="{ active: index === currentIndex }"
            ></div>
        </div>
        <p>내가 원하는 그곳을 <span>찜</span>하다.</p>
        <ul>
            <li
                v-for="index in imageList.length"
                :key="index"
                :class="{ active: index === currentIndex + 1 }"
                @click="sliderHandler(index - 1)"
            ></li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "MainBanner",
    data: () => {
        const imageList = [
            {
                id: 1,
                imgSrc:
                    "imgUrl1"
            },
            {
                id: 2,
                imgSrc:
                    "imgUrl2"
            },
            {
                id: 3,
                imgSrc:
                    "imgUrl3"
            }
        ];
        return {
            currentIndex: 0,
            lastIndex: imageList.length - 1,
            imageList
        };
    },
    methods: {
        startRotation() {
            this.lastIndex = this.currentIndex;
            this.currentIndex = this.currentIndex + 1;
            if (this.currentIndex >= this.imageList.length) {
                this.currentIndex = 0;
            }
        },
        sliderHandler(idx) {
            console.log(idx);
            this.activeIndex = idx;
            if (idx === 0) {
                this.lastIndex = this.imageList.length - 1;
            }
            if (idx !== 0) {
                this.lastIndex = idx - 1;
            }
            console.log(this.imageList);
            console.log(this.activeIndex);
        }
    },
    mounted() {
        this.setInterval = setInterval(() => {
            this.startRotation();
        }, 3000);
    },
    beforeDestroy() {
        clearInterval(this.setInterval);
    }
};
</script>
<style scoped lang="scss">
.mainBanner {
    .sliderContainer {
        position: relative;

        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: cover;

            &.active {
                animation-name: activeIndex;
                animation-duration: 3s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        }
    }
}
</style>

原理。

背景画像のdivを一つの場所に積み上げ、z-indexでレイヤーの位置を変える感覚で、大きなフレームワークを形成しました.
currentIndexを使用して一番上のdivを設定し、lastIndexを使用して一番下のdivを設定します.
自動実行のためにsetIntervalで関数を繰り返し実行します.コンポーネントを終了すると、ページを終了し、重複する関数を終了します.
currentIndexにactiveというクラスを追加してfade効果を実現します.
クラスがある場合は、cssアニメーションを使用して不透明度0>不透明度1(Opacity 0>Opacity 1)に変更します.

使用するVue api

v-for

主に、いくつかのデータに基づいて同じレイヤ/構成部品を繰り返し作成するために使用されます.
上のコードでは、表示する画像を背景としたdivを繰り返し生成する.

v-bind

v-bindは主にクラスや属性、propsなどを動的に伝達するために用いられる.v-bind:keyは:keyと略すことができ、特にv-forを使うときは必ず鍵を!彼に縛り付ける

props

親コンポーネントがサブコンポーネントにデータを渡す場合、このデータはpropsと呼ばれます.
propsはObjectまたはArrayとして低下する.
Vueでpropsを使用する場合は、スクリプトでpropsを指定して使用できます.

FeedBack / Tip

一緒に勉強していたPEN開発者からのヒントn이상으로 커질 경우 x로 돌아가게 하는 경우 나머지 연산자를 활용하면 좋아.例:

this.currentIndex = this.currentIndex + 1;
  if (this.currentIndex >= this.imageList.length) {
	this.currentIndex = 0;
  }
}

このコード.

this.currentIndex = (this.currentIndex + 1) % this.imageList.length

こんなふうに!残りの演算子を使うとは思わなかったのですが・・・
やはりしっかり勉強して、また決心しました.