如何让Vuetify的v-carousel组件滚动时切换到下一个轮播项

你可以通过绑定轮播索引、监听滚轮事件的方式实现滚动切换，具体修改如下： #

核心修改点 #

• 给v-carousel绑定v-model控制当前激活的轮播项索引
• 监听wheel滚轮事件，通过滚动方向修改索引值
• 增加防抖逻辑，避免单次滚动触发多次切换
• 可选：添加hide-delimiters、hide-arrows属性隐藏默认的箭头和分隔符控件

完整可运行代码 #

<template>
  <v-carousel 
    v-model="currentIndex"
    vertical-delimiters 
    :vertical="true"
    :cycle="true" 
    height="100%" 
    @wheel="handleScroll"
    <!-- 可选：隐藏默认控件 -->
    <!-- hide-delimiters -->
    <!-- hide-arrows -->
  >
    <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>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      isScrolling: false, // 防抖标记
      scrollDelay: 300 // 切换间隔，单位ms，可自行调整
    }
  },
  methods: {
    handleScroll(e) {
      // 防抖处理
      if (this.isScrolling) return
      this.isScrolling = true
      setTimeout(() => {
        this.isScrolling = false
      }, this.scrollDelay)
      
      // deltaY>0为向下滚动，切下一张；deltaY<0为向上滚动，切上一张
      if (e.deltaY > 0) {
        // 若关闭了cycle属性，需要加边界判断：if(this.currentIndex < 轮播项总数-1) 再+1
        this.currentIndex += 1
      } else {
        // 若关闭了cycle属性，需要加边界判断：if(this.currentIndex > 0) 再-1
        this.currentIndex -= 1
      }
    }
  }
}
</script>

补充说明 #

如果你的轮播项是动态渲染的，轮播项总数可以通过计算属性获取，自行在边界判断处添加逻辑即可。如果需要横向滚动切换，修改判断deltaX的值即可。

内容的提问来源于stack exchange，提问作者magic_iman