Quasar组件 Carousel走马灯

通过对比两个q-carousel组件来，了解该组件的属性

官方文档请参阅：Carousel

预览

源代码

vue 复制代码

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-carousel
        v-model="slide"
        transition-prev="scale"
        transition-next="scale"
        swipeable
        animated
        control-color="white"
        navigation
        padding
        arrows
        height="300px"
        class="bg-primary text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide name="style" class="column no-wrap flex-center">
          <q-icon name="style" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="tv" class="column no-wrap flex-center">
          <q-icon name="live_tv" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="layers" class="column no-wrap flex-center">
          <q-icon name="layers" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="map" class="column no-wrap flex-center">
          <q-icon name="terrain" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
      </q-carousel>

      <q-carousel
        v-model="slide"
        transition-prev="jump-right"
        transition-next="jump-left"
        swipeable
        animated
        control-color="white"
        prev-icon="arrow_left"
        next-icon="arrow_right"
        navigation-icon="radio_button_unchecked"
        navigation
        padding
        arrows
        height="300px"
        class="bg-purple text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide name="style" class="column no-wrap flex-center">
          <q-icon name="style" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="tv" class="column no-wrap flex-center">
          <q-icon name="live_tv" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="layers" class="column no-wrap flex-center">
          <q-icon name="layers" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="map" class="column no-wrap flex-center">
          <q-icon name="terrain" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </q-carousel-slide>
      </q-carousel>
    </div>
  </div>
</template>
这两个q-carousel有什么区别

比对

这两个 q-carousel 组件的主要区别在于它们的过渡效果（transition）和导航控制图标：

第一个 q-carousel：
- 使用 transition-prev="scale" 和 transition-next="scale"，这意味着幻灯片切换时有缩放效果
- 使用默认的导航箭头图标
- 背景颜色为 bg-primary（默认是蓝色系）
- 控制颜色设置为白色 (control-color="white")
第二个 q-carousel：
- 使用 transition-prev="jump-right" 和 transition-next="jump-left"，这会产生一种跳跃式的幻灯片切换效果
- 自定义了导航图标：
  - prev-icon="arrow_left" - 上一张按钮使用左箭头图标
  - next-icon="arrow_right" - 下一张按钮使用右箭头图标
  - navigation-icon="radio_button_unchecked" - 导航指示器使用未选中的单选按钮图标
- 背景颜色为 bg-purple（紫色）
- 控制颜色同样设置为白色

其他方面两者是相同的：

都支持滑动手势 (swipeable)
都有动画效果 (animated)
都显示导航指示器 (navigation)
都有内边距 (padding)
都显示箭头控制 (arrows)
高度都设置为 300px
都有相同的四个幻灯片内容（style, tv, layers, map）
都使用了相同的文本内容 ({``{ lorem }})