如何禁用Vuetify旋转木马在骑行时跳转到旋转木马

Question

在Vue 2 SPA中，我使用Vuetify。在主页上，我有一个转盘，它可以自动循环通过3个v形转盘项目。对于v形旋转木马的第一个循环，视口在循环时跳到旋转木马。所需的行为是旋转木马继续循环，但不拉动视口。奇怪的是，这种情况在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>

Answer 1

通过将转换替换为渐变，解决了我的问题。

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

Answer 2

我不确定这是否与您遇到的问题完全相同，但我在幻灯片更改时遇到了页面跳到转盘的问题，并通过将包装设置为没有高度来阻止它这样做。(我使用的是渐变动画。(

.v-window__container {
height: 0;
}