问题描述
我在 vue 中有一个带有左右箭头的旋转木马。因此,当您单击其中之一时,轮播会发生变化。例如,我想要实现的是在 5 秒后自动更改轮播。 所以我有一个轮播组件:
<template>
<div class="carousel" @keydown="checkSlide($event)" tabindex="0">
<slot></slot>
<button @click.prevent="next" class="btn btn-next"><i class="fa fa-angle-right"></i></button>
<button @click.prevent="prev" class="btn btn-prev"><i class="fa fa-angle-left"></i></button>
</div>
</template>
<script>
export default {
data () {
return {
index : 0,slides : [],slideDirection: '',}
},computed: {
slidesLength() {
return this.slides.length;
}
},mounted(){
this.slides = this.$children;
this.slides.map( (slide,index) => {
slide.index = index;
});
},methods: {
next(){
this.index++;
if(this.index >= this.slidesLength){
this.index = 0;
}
this.slideDirection = 'slide-right';
},prev(){
this.index--;
if(this.index < 0){
this.index = this.slidesLength - 1;
}
this.slideDirection = 'slide-left';
},checkSlide(event){
if(event.keyCode === 39){
this.next();
}else if (event.keyCode === 37){
this.prev();
}else {
return;
}
},}
}
</script>
我也有轮播组件:
<template>
<transition :name="dir">
<div v-show="visible">
<slot></slot>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
index : 0,computed : {
visible() {
return this.index === this.$parent.index;
},dir() {
return this.$parent.slideDirection;
},}
}
</script>
最后,我在主页中调用轮播,如下所示:
<carousel >
<carousel-slide v-for="ticket in tickets" :key="ticket.id" class="carousel-slider">
<img :src="ticket.src" :alt="ticket.name">
</carousel-slide>
</carousel>
希望我的问题很清楚,感谢您的帮助...
解决方法
您可以使用 setInterval()
调用 next()
函数。之后,您应该添加一个 beforeDestroy()
方法来清除间隔。
您也可以添加一个按钮来使用相同的代码开始/停止间隔。
在页面 mounted()
上开始自动滑动的示例
mounted(){
....
this.interval = setInterval(() => { this.next() },5000)
},beforeDestroy () {
clearInterval(this.interval)
}
,
我认为我们应该有一个方法来执行此操作并存储 setInterval
,以便我们在调用 next
或 prev
时可以清除它
data() {
return {
...
interval: null,}
},methods: {
switchInterval() {
// if it's already set we clear so we reset calculation
if (this.interval !== null) clearinterval(this.interval);
this.interval = setInterval(() => {
// call next or prev logic
},5000)
},next() {
...
// you can use the same logic in prev()
this.switchInterval()
},...
},beforeDestroy() {
// just make sure this.interval is not null
if (this.interval) clearInterval(this.interval)
}