有没有办法让 Vuetify v-carousel 移动到滚动的下一个项目？

Question

我正在尝试使用 v-carousel 构建首页，并希望滚动到下一个项目而不是使用箭头或分隔符，我该如何实现？

这是我现在的代码

<template>
  <v-carousel vertical-delimiters 
  :vertical="true"
  :cycle="true" 
  height="100%" 
  >
    <v-carousel-item >
      <v-sheet
        color="black"
        height="100%"
        tile
      >
        <v-container
          fill-height
          fluid
        >

          <v-row
            align="center"
            justify="center"
            dense
            class ="ma-0"
          >
            <v-col
            align="center"
            justify="center"
            >

              <v-img src="imagepath"
                      max-height="350"
                      max-width="350"
                      class="ma-10"
              >
              </v-img>

              <div class="text-h4 pa-7">
                Some text
              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-sheet>
    </v-carousel-item>

    <v-carousel-item>
      <v-sheet
        color="black"
        height="100%"
        tile
      >
        <v-container
          fill-height
          fluid
        >

          <v-row
            align="center"
            justify="center"
            dense
            class ="ma-0"
          >
            <v-col
            align="center"
            justify="center"
            >

              <v-img src="Image Path"
                      max-height="350"
                      max-width="350"
                      class="ma-10"
              >
              </v-img>

              <div class="text-h4 pa-7">
                Some text
              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
</template>

轮播工作得很好，但我找不到将滚动事件发送到轮播作为移动到下一个项目的事件的方法。

Answer 1

我认为你可以将你的 carousel 包装到 Intersection observer 中，这样你就可以观察到滚动事件，然后你就可以调用可以处理 carousel 的函数了。

例如您必须为<v-carousel> 提供v-model，然后在跟踪滚动事件后，您可以增加或减少v-model 的数量。

另一种方法是使用scroll directive。 v-scroll 指令允许您在窗口、指定目标或元素本身（带有 .self 修饰符）滚动时提供回调。