Ich habe eine relativ anpassungsfähige Vue-Komponente geschrieben, die bei Bedarf direkt verwendet werden kann.
Klicken Sie, um zu folgen, und wir bringen Ihnen weitere ausgefallene Komponenten und Codes ∠( ᐛ ∠)＿
Schauen wir uns zunächst die Wirkung an:
Automatisches Karussell, Schwebevergrößerung und Tastensteuerung scheinen nichts Besonderes zu sein. Als Nächstes werde ich über das einzigartige Design dieser Komponente sprechen.
Die erste ist die Größenanpassung. Die Komponente passt ihre Größe entsprechend der Position der übergeordneten Komponente am Referenzpunkt an.
Das heißt, unabhängig von der Größe der übergeordneten Komponente kann die Komponente immer in einer relativ normalen Form angezeigt werden.
Nicht einmal die relative Position der Pfeile ändert sich.
Zweitens kann sich diese Komponente an Bilder jeder Größe anpassen. Auch wenn die Bildgröße nicht einheitlich ist, kann sie dennoch einzeln scrollen.
Lassen Sie uns als Nächstes über die Umsetzungsideen sprechen.
1. Zunächst wird das Array „photoList“ in Daten definiert, das zum Speichern des Pfads der zu drehenden Bilder verwendet wird, und „currentIndex“ stellt den Index des aktuell angezeigten Bildes dar.
data() {
return {
photoList: [photo, photo2, photo, photo, photo2, photo2, photo],
currentIndex: 0,
time: null,
};
},2. Stellen Sie im Hook „mounted“ einen Timer „this.time“ ein und lösen Sie alle 3 Sekunden die Methode „moveRight“ aus, sodass sich das Bild automatisch nach rechts dreht.
mounted() {
this.time = setInterval(() => {
if (this.currentIndex < photo.length) {
this.moveRight();
}
}, 3000);
},3. Die Methoden „moveLeft“ und „moveRight“ werden verwendet, um den Index des Bildes zu ändern, sodass das Bild nach links oder rechts scrollt.
moveLeft() {
if (this.currentIndex > 0) {
this.currentIndex = this.currentIndex - 1;
}
},
moveRight() {
if (this.currentIndex < this.photoList.length - 1) {
this.currentIndex = this.currentIndex + 1;
}
},4. Die Methode „stopScroll“ wird verwendet, um den Timer „this.time“ zu löschen und das automatische Scrollen von Bildern zu stoppen, wenn sich die Maus in den Karussellcontainer bewegt.
5. Die Methode „startScroll“ wird verwendet, um den Timer „this.time“ neu zu starten und das automatische Scrollen des Bildes fortzusetzen, wenn sich die Maus aus dem Karussell-Container bewegt.
//鼠标移入停止滚动
stopScroll() {
clearInterval(this.time);
console.log("停止滚动");
},
//鼠标移出继续滚动
startScroll() {
this.time = setInterval(() => {
if (this.currentIndex < photo.length) {
this.moveRight();
}
}, 3000);
console.log("继续滚动");
},6. Verwenden Sie die Ereignisse „@mouseenter“ und „@mouseleave“, um die Eintritts- und Ausgangsereignisse der Maus abzuhören, und rufen Sie die Methoden „stopScroll“ bzw. „startScroll“ auf, um das Scrollen des Bildes zu stoppen, wenn die Maus darüber schwebt Scrollen Sie weiter, wenn die Maus herausbewegt wird.
<template>
<div class="room" @mouseenter="stopScroll" @mouseleave="startScroll">
<div class="back">
<img v-for="(item, index) in photoList" :key="index" :src="item" />
</div>
<span class="left" @click="moveLeft">《</span>
<span class="right" @click="moveRight">》</span>
</div>
</template>7. Verwenden Sie „watch“, um Änderungen in „currentIndex“ zu überwachen und den „transform“-Stil des „.back“-Elements zu aktualisieren, wenn das Bild gewechselt wird, sodass der Bildcontainer nach links scrollt, um das aktuelle Bild anzuzeigen Der Versatz wird direkt gelesen. Der Abstand des untergeordneten Elements relativ zur linken Seite des Containers, sodass es sich jedes Mal normal drehen kann, auch wenn die Bildbreite unterschiedlich ist .
watch: {
currentIndex(newValue) {
const parentElement = document.querySelector(".back");
const childrenElement = parentElement.children;
parentElement.style.transform =
"translateX(" + -childrenElement[newValue].offsetLeft + "px)";
},
},8. Stellen Sie im Stil den „.room“-Container so ein, dass er relativ positioniert ist, um den Anzeigebereich seines Inhalts einzuschränken; stellen Sie den „.back“-Container so ein, dass er absolut positioniert ist, um Bilder aufzunehmen und einen horizontalen Scrolleffekt zu erzielen; legen Sie „. left` und ` Das .right`-Element ist absolut positioniert und stellt linke bzw. rechte Pfeile dar, die zum Wechseln von Bildern durch Klicken darauf verwendet werden. Verwenden Sie gleichzeitig „Übergang“, um den Animationseffekt des Bildwechsels zu erzielen.
Im Anhang finden Sie den vollständigen Code. Denken Sie daran, den Bildpfad zu ändern, wenn Sie ihn verwenden:
<template>
<div class="room" @mouseenter="stopScroll" @mouseleave="startScroll">
<div class="back">
<img v-for="(item, index) in photoList" :key="index" :src="item" />
</div>
<span class="left" @click="moveLeft">《</span>
<span class="right" @click="moveRight">》</span>
</div>
</template>
<script>
import photo from "../../image/02.jpg";
import photo2 from "../../image/02 - 副本.jpg";
export default {
data() {
return {
photoList: [photo, photo2, photo, photo, photo2, photo2, photo],
currentIndex: 0,
time: null,
};
},
methods: {
moveLeft() {
if (this.currentIndex > 0) {
this.currentIndex = this.currentIndex - 1;
}
},
moveRight() {
if (this.currentIndex < this.photoList.length - 1) {
this.currentIndex = this.currentIndex + 1;
}
},
stopScroll() {
clearInterval(this.time);
console.log("停止滚动");
},
//鼠标移出继续滚动
startScroll() {
this.time = setInterval(() => {
if (this.currentIndex < photo.length) {
this.moveRight();
}
}, 3000);
console.log("继续滚动");
},
},
mounted() {
this.time = setInterval(() => {
if (this.currentIndex < photo.length) {
this.moveRight();
}
}, 3000);
},
watch: {
currentIndex(newValue) {
const parentElement = document.querySelector(".back");
const childrenElement = parentElement.children;
parentElement.style.transform =
"translateX(" + -childrenElement[newValue].offsetLeft + "px)";
},
},
};
</script>
<style scoped>
.room {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.back {
height: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
transition: 0.5s;
}
.back img {
height: 80%;
margin: 0 1%;
transition: 0.5s;
}
.back img:hover {
height: 100%;
margin: 0 0;
}
.room span {
position: absolute;
top: 50%;
color: red;
font-size: 30px;
font-weight: 700;
transform: translateY(-50%);
cursor: pointer;
}
.left {
left: 0%;
}
.right {
right: 0%;
}
</style>