Question

我制作了一个自定义Vue滑块，到目前为止，它仍然有效，但是我有个想法要在滑块上添加暂停/播放按钮，问题是我不知道如何处理暂停和恢复滑块的setInterval函数，我想要一个功能在我的组件中切换暂停/播放，但是我不确定如何实现此功能。

这是我的组成部分：

<template>
<section class="SLIDERcontainer8_maincontainer">
    <transition-group name="slider-fade">
        <div class="SLIDERcontainer8_image move" :style="'background-image:url('+item.image+');'" v-for="(item, index) in slideritems" :key="item.title" :class="{ 'active_slider' : activeslider == index }"></div>
    </transition-group>
    <div class="SLIDERcontainer8_dots_container">
        <button class="SLIDERcontainer8_dot fs_normal c_light" :class="{ 'active_dot' : index == activeslider }" v-for="(slider, index) in slideritems" :key="index" @click="goToSlider(index)" type="button">{{ slider.title }}</button>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
export default {
name: 'SLIDERcontainer7',


computed:
{
    ...mapState('Globals', ['globals'])
},


props:
{
    sliderinterval: { default: 5000, type: Number },
    slideritems: { required:true }
},


data() {
    return {
        sliderTimer: 0,
        activeslider: 0,
    }
},


mounted() {
    console.log(this.$options.name+' component successfully mounted');
    this.startSlider();
},


methods:{


    startSlider() {
        var self = this;
        this.activeslider = 0;
        clearInterval(this.sliderTimer);
        this.sliderTimer = setInterval(() => {
        self.nextSlider() }, self.sliderinterval);
    },


    prevSlider() {
        if(this.activeslider == 0){
            this.activeslider = this.slideritems.length - 1;
        }
        else{
            this.activeslider = this.activeslider - 1;
        }
    },


    nextSlider() {
        if(this.activeslider == this.slideritems.length - 1){
            this.activeslider = 0;
        }
        else{
            this.activeslider = this.activeslider + 1;
        }
    },


    goToSlider (sliderIndex) {
        var self = this;
        this.activeslider = sliderIndex;
        clearInterval(this.sliderTimer);
        this.sliderTimer = setInterval(() => {
        self.nextSlider() }, self.sliderinterval);

    },

}


};
</script>
<!--STYLES-->
<style scoped>
.active_slider{display:flex !important;}
.active_dot{background-color:var(--web_primary_color) !important;}
.SLIDERcontainer8_maincontainer{width:100%; height:70vh; position:relative; overflow:hidden; margin:0px 0px 0px 0px;}
.SLIDERcontainer8_image{display:none; width:100%; height:100%; background-size:cover; background-position:center; position:absolute; top:0px; left:0px;}
.SLIDERcontainer8_dots_container{width:100%; height:75px; flex-wrap:no-wrap; background-color:rgba(49,47,84,0.95); display:flex; justify-content:center; align-items:center; position:absolute; bottom:0px; left:0px;}
.SLIDERcontainer8_dot{cursor:pointer; height:100%; display:flex; border-right:1px solid rgba(0,0,0,0.2); align-items:center; justify-content:center; text-align:center; flex:1; padding:0px 20px;}
.SLIDERcontainer8_dot:hover{background-color:var(--web_primary_color) !important;}
@media only screen and (max-width: 736px) 
{
.SLIDERcontainer8_maincontainer{width:100%; height:250px; position:relative; overflow:hidden; margin:0px 0px 0px 0px;}
.SLIDERcontainer8_image{display:none; width:100%; height:100%; background-size:cover; background-position:center; position:absolute; top:0px; left:0px;}
.SLIDERcontainer8_dots_container{width:100%; height:40px; flex-wrap:no-wrap; background-color:rgba(49,47,84,0.95); display:flex; justify-content:center; align-items:center; position:absolute; bottom:0px; left:0px;}
.SLIDERcontainer8_dot{width:15px; height:15px; text-indent: -9999px; background-color:white; display:flex; border-radius:50%; margin:0px 5px; border-right:0px solid rgba(0,0,0,0.2); align-items:center; justify-content:center; text-align:center; flex:none; padding:0px 0px;}
.SLIDERcontainer8_dot:hover{background-color:var(--web_primary_color) !important;}
}
</style>

请帮帮我。

Answer 1

您可以添加暂停和继续方法以清除和设置新间隔。

methods: {

  ...

  pauseSlider () {
    clearInterval(this.sliderTimer);
  },

  resumeSlider () {
    this.sliderTimer = setInterval(() => {
      this.nextSlider() 
    }, this.sliderinterval)
  }

  ...
}

如果要重新启动，只需致电startSlider。

暂停并重新启动我的自定义Vue滑块

1 个答案: