如何在骑行时禁用 Vuetify 轮播跳转到轮播？答案

【问题标题】：How to disable Vuetify carousel jump to carousel on cycling?如何在骑行时禁用 Vuetify 轮播跳转到轮播？
【发布时间】：2020-11-04 19:36:22
【问题描述】：

在 Vue 2 SPA 中，我使用 Vuetify。在主页上，我有一个轮播，可以自动循环通过 3 个 v-carousel-items。对于 v-carousel 的第一个循环，视口在骑车时跳转到 carousel。期望的行为是让轮播继续循环但不拉动视口。奇怪的是，它发生在 Chrome 中，但没有发生在 Firefox 中。我在https://www.programmersought.com/article/15814769396/ 中发现了一个类似的问题。

<v-carousel 
      progress 
      :progress-color="secondColorComputed" 
      interval=7000 
      cycle 
      height="750px" 
      class="mx-auto ; my-4 ;" 
      show-arrows-on-hover>

      <v-carousel-item 
        transition="false"
        reverse-transition="false">
        <v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
          <v-card-title>Sub Seasonal Outlook</v-card-title>
          <!-- <v-container fluid> -->
            <v-row align="center" justify="center">
              <v-card width="50%">
                <v-img
                  alt="GIF 1"
                  class="shrink"
                  contain
                  src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/geps/ss-precip.png"
                  width="800"/>
              </v-card>
              <v-spacer></v-spacer>
              <v-card width="50%">
                <v-img
                  alt="GIF 2"
                  class="shrink"
                  contain
                  src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/geps/ss-temp.png"
                  width="800"/>
              </v-card>
            </v-row>
          <!-- </v-container> -->
          <v-btn :color="secondColorComputed" to="/forecasts/sub-seasonal-outlook">More</v-btn>
        </v-card>
      </v-carousel-item>

      <v-carousel-item 
        transition="false"
        reverse-transition="false">
        <v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
          <v-card-title>Multi Model Ensemble 03H Continental USA</v-card-title>
          <!-- <v-container fluid> -->
            <v-row align="center" justify="center">
              <v-spacer/>
              <v-card width="75%">
                <v-img
                  alt="GIF 1"
                  class="shrink"
                  contain
                  src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/mme-pm25-combined/conUS-pm25-03.png"
                  />
              </v-card>
              <v-spacer/>
            </v-row>
          <!-- </v-container> -->
          <v-btn :color="secondColorComputed" to="/forecasts/multi-model-ensemble">More</v-btn>
        </v-card>
      </v-carousel-item>

      <v-carousel-item 
        transition="false"
        reverse-transition="false">
        <v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
          <v-card-title>Fire Weather Index 24H</v-card-title>
          <!-- <v-container fluid> -->
            <v-row align="center" justify="center">
              <v-spacer/>
              <v-card width="50%">
                <v-img
                  alt="GIF 1"
                  class="shrink mr-2"
                  contain
                  src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/fwi/fwi-24.png"
                  width="800"/>
              </v-card>
              <v-spacer/>
            </v-row>
          <!-- </v-container> -->
          <v-btn :color="secondColorComputed" to="/forecasts/fire-weather-index">More</v-btn>
        </v-card>
      </v-carousel-item>

    </v-carousel>

【问题讨论】：

标签： vue.js google-chrome vuejs2 vuetify.js

【解决方案1】：

我不确定这是否与您遇到的问题完全相同，但我遇到了页面在幻灯片更改时跳转到轮播的问题，并通过设置包装器没有高度。（我正在使用淡入淡出动画。）

.v-window__container {
 height: 0;
}

【讨论】：

谢谢@Gemma 恐怕这不起作用，但如果你知道为什么它应该起作用，你能否解释一下，以便我可以根据我的情况调整你的解决方案？

【解决方案2】：

我的问题通过将 transition 替换为 fade 过渡得到解决。

 <v-carousel :cycle="true" interval="3000">
<v-carousel-item
  v-for="(item,i) in items"
  :key="i"
  :src="item.src"
  fade    
></v-carousel-item>

【讨论】：