如何在 nuxt 上使用 vue-glide-js 事件并在最后一张幻灯片上加载更多幻灯片

Question

我是所有这些方面的新手，所以我需要帮助。首先，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>

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

还有一件事。如果有任何更好的旋转木马支持 rtl 和断点（不同宽度的每个视图的项目），我会很高兴知道。坦克

Answer 1

要在幻灯片末尾使用调用方法，只需使用 @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>

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

如何在 nuxt 上使用 vue-glide-js 事件并在最后一张幻灯片上加载更多幻灯片

how to use vue-glide-js events on nuxt and load more slides on last one

carousel

glidejs

nuxt.js

nuxtjs