Question

我希望轮播能够自动播放，直到用户单击dropdown，轮播会转到该选项slide，并且自动播放应该停止为止。

我唯一无法做的事情就是停止autoplay，我已经安装了vue devtools，并且在轮播组件中显示，当我在dropdown中选择一个选项时，自动播放的标志会使用我在doAutoplay道具中传递的值来更改其值。我这样使用ssense vue-carousel

//Vue imports
....
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);

和模板中

<carousel :loop="true" :per-page="1" :autoplay="doAutoplay" :autoplay-timeout="4000" :pagination-enabled="false" :mouse-drag="false" :navigate-to="sede == '' ? 0 : sede" :autoplay-hover-pause="false">
    <slide>
        <img :src="$asset('images/backgrounds/background1.jpg')">
    </slide>
    ....
    //more slides
</carousel>

这是下拉列表

<md-field>
    <md-select v-model="sede" name="sede" id="sede">
        <md-option :value="index" v-for="(s, index) in sedes" :key="index">{{ s.name }}</md-option>
    </md-select>
</md-field>

其余

export default {
    data : () => {
        return {
            ...
            sede     : '',
            sedeData : {},
            sedes    : [],
            doAutoplay : true
        }
    },
    created : function(){

        axios.get(this.$asset('api/inicio')).then((response) => {
            this.sedes      = response.data.sedes;//this is the data for the dropdown
        }).catch(() => {
        });

    },
    watch : {
        sede(){
            //i watch the dropdown for changes, if it does, i reevaluate the doAutoplay prop.
            this.doAutoplay = false;
            this.sedeData = this.sedes[this.sede];
        }
    }

}

为什么在将其值更改为false后自动播放不停止？我该如何解决？

Answer 1

lookahead不包含autoplay属性，这就是轮播不会停止的原因。

尽管有speed属性，但可以在打开下拉列表时将其设置为0，而在关闭下拉列表时将其设置为> 0。

编辑：奇怪的是，property list at Github中有一个自动播放选项，但在GitHub的属性列表中没有。

Vue轮播自动播放不会在标志更改时停止

1 个答案: