Swiper 轮播图

全端响应式轮播图组件，支持胶囊长点/经典小圆点/数字页码三种指示器、前后露边卡片轮播 (Peek Margin) 以及自定义插槽模板扩展。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-swiper :list="bannerList" :height="340" @click="onClick" />
</template>

<script setup>
import { ref } from 'vue'

const bannerList = ref([
  { image: 'https://picsum.photos/800/400?random=1', title: '轮播图标题 1' },
  { image: 'https://picsum.photos/800/400?random=2', title: '轮播图标题 2' }
])

function onClick(index) {
  console.log('点击了轮播项:', index)
}
</script>

---

2. 指示器模式与位置 (Indicator Modes)

通过 indicator-mode 配置指示器形态（line 胶囊拉长点 | dot 小圆点 | fraction 数字页码 | none），通过 indicator-pos 调整放置位置（bottom-center | bottom-right | bottom-left）。

<template>
  <!-- 数字页码右下角模式 -->
  <mu-swiper
    :list="bannerList"
    indicator-mode="fraction"
    indicator-pos="bottom-right"
  />
</template>

---

3. 前后露边卡片轮播 (Peek Margin)

设置 previous-margin 与 next-margin 可以实现卡片前后露出边角的效果。

<template>
  <mu-swiper
    :list="bannerList"
    previous-margin="30rpx"
    next-margin="30rpx"
    indicator-mode="dot"
  />
</template>

---

4. 自定义插槽内容 (Custom Slot)

使用默认插槽解构 :item 和 :index 来自定义卡片内部结构：

<template>
  <mu-swiper :list="cardList" :height="220" indicator-mode="none">
    <template #default="{ item, index }">
      <view class="custom-card">
        <text>{{ item.title }}</text>
      </view>
    </template>
  </mu-swiper>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
list	轮播图片或数据列表（支持图片 URL 数组或对象数组）	Array	-	[]
current	当前显示的轮播项索引	Number	-	0
height	轮播图容器高度 (rpx / px)	Number | String	-	360
interval	自动切换时间间隔 (ms)	Number	-	3000
duration	滑动动画切换时长 (ms)	Number	-	300
autoplay	是否开启自动播放	Boolean	true | false	true
loop	是否开启无缝循环播放	Boolean	true | false	true
indicator	是否显示指示器	Boolean	true | false	true
indicatorMode	指示器形态	String	line | dot | fraction | none	'line'
indicatorPos	指示器摆放位置	String	bottom-center | bottom-right | bottom-left	'bottom-center'
indicatorColor	激活态指示器主题色	String	-	''
imageMode	图片裁剪填充模式	String	'aspectFill' | 'scaleToFill' 等	'aspectFill'
radius	轮播图内图片圆角	String	-	'24rpx'
previousMargin	前边距 (用于露出前卡片边角)	String	-	'0px'
nextMargin	后边距 (用于露出后卡片边角)	String	-	'0px'

---

事件说明 (Events)

事件名	说明	回调参数
change	切换轮播项时触发	(current: number)
click	点击某个轮播项时触发	(index: number)

---

插槽说明 (Slots)

插槽名	说明	作用域参数
default	自定义轮播项卡片内部内容	{ item: any, index: number }