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)和导航控制图标:

  1. 第一个 q-carousel

    • 使用 transition-prev="scale"transition-next="scale",这意味着幻灯片切换时有缩放效果
    • 使用默认的导航箭头图标
    • 背景颜色为 bg-primary(默认是蓝色系)
    • 控制颜色设置为白色 (control-color="white")
  2. 第二个 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 }})
相关推荐
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef068 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端9 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder10 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句10 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript