1

我对所有这些都是新手，所以我需要帮助。首先是 vue-glide-js 事件是如何工作的。它的文档只是在没有示例的情况下列出了它们。其次，更重要的是，我想在我的轮播结束时发送一个 axios 请求并加载更多项目。我无法处理事件，因此使用了活动幻灯片并观看了它，最后一张幻灯片发送并更新了我的数据，但幻灯片仍显示前一张。我该怎么办？

这是我的代码的简化版本

<template>
    <div>
      <vue-glide v-bind="carouselOptions" v-model="active">
      <vue-glide-slide v-for="i in array" :key="i">
        Slide {{ i }}
      </vue-glide-slide>
    </vue-glide>
    <p>{{active}}</p>
    </div>
</template>

<script>
  export default {
    data(){
        return{
            carouselOptions:{
                direction: process.env.SITE_DIRECTION,
                autoplay: false,
                perView: this.$device.isMobileOrTablet ? 4 : 8,
                peek: { before: 0, after: 50 }
            },
            array: [1,2,3,4,5,6,7],
            active: 0
        }
    },
    watch:{
      active(){
        console.log('active = ' + this.active)
        if(this.active > this.array.length - 3){
          this.array= [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
        }
      }
    },
    mounted(){
      //
    }
  }
</script>

如您所见，我手动向数组中添加了更多项目，但 glide 仍显示 7 个项目。我知道这与安装有关，但不知道该怎么做。

还有一件事情。如果有更好的轮播支持 rtl 和断点（不同宽度的每个视图的项目），我很高兴知道。坦克

4

1 回答 1

0

要在幻灯片末尾使用调用方法，只需使用@glide:run-end：

<template>
    <div>
      <vue-glide v-bind="carouselOptions" v-model="active" @glide:run-end="myMethod">
      <vue-glide-slide v-for="i in array" :key="i">
        Slide {{ i }}
      </vue-glide-slide>
    </vue-glide>
    </div>
</template>

展示新幻灯片，有点棘手！据我所知，唯一的方法是刷新（重新加载）组件！key所以在vue-glide每张新添加的幻灯片后戴上并更改它。唯一的问题是，如果幻灯片上有图像，旧的也会重新加载。（这是一个建议，我还没有尝试过，但也许有缓存系统，它可能会解决）

于 2020-11-09T08:34:59.170 回答