更新记录

1.0.0（2025-11-10） 下载此版本

更新滚动样式

平台兼容性

uni-app(4.71)

CardSwiper 卡片轮播（uni_modules）

一个适用于 uni-app 的卡片轮播组件，支持左右滑动、自动播放、指示器、插槽自定义等。该版本可直接放入 uni_modules 并独立运行。

安装与引入

1) 将本组件目录拷贝到项目：

• src/uni_modules/card-swiper/

2) 确保开启 easycom（项目通常默认开启）：

• 在 pages.json 中存在：

  "easycom": { "autoscan": true }

3) 直接在页面使用组件（无需手动注册）：

<card-swiper :list="list" />

如果未生效，可在页面中手动引入：

<script setup lang="ts">
import CardSwiper from '@/uni_modules/card-swiper/components/card-swiper/card-swiper.vue'
</script>

快速上手（来自项目实际用法）

<template>
  <view>
    <card-swiper
      :list="list"
      :height="'360rpx'"
      :sideMargin="40"
      :activeScale="1"
      :inactiveScale="0.85"
      :inactiveOpacity="0.5"
      :inactiveOffsetY="'20rpx'"
      :autoplay="true"
      :interval="4000"
      :duration="600"
      :circular="true"
      :showIndicator="true"
      :indicatorGap="'30rpx'"
      :indicatorColor="'#d1d5db'"
      :indicatorActiveColor="'linear-gradient(135deg, #3b82f6, #8b5cf6)'"
      :showDecoration="true"
      :showGlow="true"
      @change="onChange"
      @click="onClick"
    />
  </view>

</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  {
    title: 'Vue3 实战',
    desc: '组合式 API / 性能优化 / 工程化',
    tag: 'Hot',
    image: '/static/icons/Vue.png',
    gradient: '#34d399, #10b981'
  },
  {
    title: 'React 进阶',
    desc: 'Hooks / 状态管理 / 架构设计',
    image: '/static/icons/React.png',
    gradient: '#60a5fa, #3b82f6'
  }
])

const onChange = (index: number) => {
  console.log('当前卡片索引:', index)
}

const onClick = (item: any, index: number) => {
  console.log('点击卡片:', item, index)
}
</script>

Props

• list: CardSwiperItem[] = []
• sideMargin: string | number = 40（左右露出宽度）
• previousMargin / nextMargin: string = ''（自定义前后露出，优先级高于 sideMargin）
• height: string = '400rpx'
• borderRadius: string = '32rpx'
• autoplay: boolean = true
• interval: number = 4000
• duration: number = 600
• circular: boolean = true
• activeScale: number = 1
• inactiveScale: number = 0.85
• inactiveOpacity: number = 0.5
• inactiveOffsetY: string = '20rpx'
• showIndicator: boolean = true
• indicatorGap: string = '30rpx'
• indicatorColor: string = '#d1d5db'
• indicatorActiveColor: string = 'linear-gradient(135deg, #3b82f6, #8b5cf6)'
• showDecoration: boolean = true
• showGlow: boolean = true

事件

• change(index: number): 当前索引变化时触发
• click(item: CardSwiperItem, index: number): 点击卡片时触发（如需使用请在插槽中绑定点击）

插槽

• name="item"：自定义卡片渲染内容，作用域参数：item、index、active

<card-swiper :list="list">
  <template #item="{ item, index, active }">
    <view class="my-card">
      <text>{{ item.title }}</text>
    </view>
  </template>
</card-swiper>

列表项结构（CardSwiperItem）

{
  title: string
  desc?: string
  tag?: string
  icon?: string
  image?: string
  gradient?: string
  background?: string
  [key: string]: any
}

注意事项

• 组件已内置 CardSwiperItem 类型，无需依赖项目的 @/types。
• 在 H5/各小程序平台均可使用，依赖原生 <swiper> 能力。
• 图片等静态资源路径请根据你项目实际调整（示例中使用了 /static/*）。

版本与许可

• 版本：1.0.0
• 许可：MIT