时间戳

首页 > 解决方案 > v-carousel 在移动到下一个项目时跳过

vue.js - v-carousel 在移动到下一个项目时跳过

问题描述

每当 v-carousel 移动到卷轴中的下一个图像时，它会在加载图像之前缩小，导致轮播“跳过”。有什么办法可以防止这种情况发生吗？也许通过预加载图像？静态图像来自使用 asyncData 的父 nuxt 组件，所以我认为它已经被加载。

轮播组件：

<template>
<v-container class="hero-wrapper">
  <v-carousel
    cycle
    hide-delimiters
    height="auto"
    >
    <v-carousel-item
      v-for="(item,i) in heroImages"
      :key="i"
      class="pb-0 mb-0"
      :href="item.link"
      >
      <img :src="item.image" class="hero-image">
    </v-carousel-item>
  </v-carousel>
</v-container>
</template>

<script>
export default {
    props: ["heroImages"]
}
</script>

标签： vue.jsnuxt.jsvuetify.js

解决方案

尝试将eager道具添加到v-carousel-item.

<v-carousel-item
    v-for="(item,i) in heroImages"
    :key="i"
    eager
    class="pb-0 mb-0"
    :href="item.link"
>

推荐阅读