@tanzhenxing/zx-carousel v1.0.3

zx-carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容。

基本用法

<template>
  <zx-carousel height="300rpx" :list="carouselList">
  </zx-carousel>
</template>

<script>
export default {
  data() {
    return {
      carouselList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
        'https://example.com/image4.jpg'
      ]
    }
  }
}
</script>

指示器

可以将指示器的显示位置设置在容器外部

<template>
  <zx-carousel 
    :list="carouselList" 
    indicator-position="outside"
    height="300rpx"
  >
  </zx-carousel>
</template>

切换箭头

可以设置切换箭头的显示时机

<template>
  <zx-carousel 
    :list="carouselList" 
    arrow="always"
    :interval="5000"
    height="300rpx"
  >
  </zx-carousel>
</template>

卡片模式

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格

<template>
  <zx-carousel 
    :list="carouselList" 
    type="card"
    height="200rpx"
    :interval="4000"
  >
  </zx-carousel>
</template>

垂直排列

通过设置 direction 为 vertical 来让走马灯在垂直方向上显示

<template>
  <zx-carousel 
    :list="carouselList" 
    direction="vertical"
    height="400rpx"
    :autoplay="false"
  >
  </zx-carousel>
</template>

动态模糊

添加动态模糊以给走马灯注入活力和流畅性

<template>
  <zx-carousel 
    :list="carouselList" 
    :motion-blur="true"
    height="200rpx"
  >
  </zx-carousel>
</template>

自定义内容

使用 zx-carousel-item 组件来自定义轮播内容

<template>
  <zx-carousel height="300rpx">
    <zx-carousel-item v-for="(item, index) in customList" :key="index">
      <view class="custom-item">
        <text>{{ item.title }}</text>
        <text>{{ item.desc }}</text>
      </view>
    </zx-carousel-item>
  </zx-carousel>
</template>

<script>
export default {
  data() {
    return {
      customList: [
        { title: '标题1', desc: '描述1' },
        { title: '标题2', desc: '描述2' },
        { title: '标题3', desc: '描述3' }
      ]
    }
  }
}
</script>

<style>
.custom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
  color: white;
}
</style>

API

Carousel Attributes

Carousel Events

Carousel Slots

Carousel Exposes

CarouselItem API

CarouselItem Attributes

CarouselItem Events

CarouselItem Slots

数据格式

基础数组格式

// 字符串数组（图片链接）
const list = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
]

// 对象数组
const list = [
  {
    id: 1,
    src: 'https://example.com/image1.jpg',
    title: '图片1',
    label: '标签1'
  },
  {
    id: 2,
    src: 'https://example.com/image2.jpg', 
    title: '图片2',
    label: '标签2'
  }
]

// 混合内容
const list = [
  {
    type: 'image',
    src: 'https://example.com/image1.jpg',
    title: '图片'
  },
  {
    type: 'text',
    title: '文本内容',
    content: '这是一段文本'
  },
  {
    type: 'custom',
    data: { /* 自定义数据 */ }
  }
]

注意事项

1. 在 uni-app 中，某些平台可能不支持所有的 swiper 属性，如 nvue 和部分小程序平台。
2. 动态模糊效果在某些低端设备上可能影响性能。
3. 卡片模式在垂直方向上显示时，建议调整 card-scale 参数以获得更好的视觉效果。
4. 指示器的 hover 事件在移动端会转换为 touch 事件。
5. 箭头在移动端默认隐藏，只在桌面端 hover 时显示（除非设置为 always）。

更新日志

v1.0.0

• 初始版本发布
• 支持基础轮播功能
• 支持指示器、箭头、卡片模式、垂直排列
• 支持动态模糊效果
• 支持自定义内容和样式
• 完全兼容 Element Plus Carousel 组件 API