用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。
基本使用
html
<iui-swiper :list="list"></iui-swiper>
<script setup>
const list = [
"https://example1.jpg",
"https://example2.jpg",
"https://example3.jpg",
];
</script><iui-swiper :list="list"></iui-swiper>
<script setup>
const list = [
"https://example1.jpg",
"https://example2.jpg",
"https://example3.jpg",
];
</script>前后间距
通过 margin 属性为每个轮播项设置前后间距。
html
<iui-swiper :list="list" :margin="20" :width="90" :radius="4"></iui-swiper><iui-swiper :list="list" :margin="20" :width="90" :radius="4"></iui-swiper>突出显示
突出显示当前轮播项。
html
<iui-swiper :list="list" margin="50" zoom :radius="4"></iui-swiper><iui-swiper :list="list" margin="50" zoom :radius="4"></iui-swiper>垂直轮播图
偶尔我们需要使用到垂直方向的轮播图，可以通过 direction 属性设置轮播图的方向。
html
<iui-swiper :list="list" direction="vertical" indicatorType="line"></iui-swiper><iui-swiper :list="list" direction="vertical" indicatorType="line"></iui-swiper>指示点样式
通过 indicatorType 属性设置指示点样式，可选值为 dot line。indecatorAlign 可以设置指示点的位置，可选值为 start center end。
如果需要自定义指示点样式，可以通过 indicator 插槽自定义指示点。
html
<!-- 指示点显示在右侧 -->
<iui-swiper :list="list" indicatorAlign="end"></iui-swiper>
<!-- 指示点显示为线条 -->
<iui-swiper :list="list" indicatorType="line"></iui-swiper>
<!-- 自定义指示点 -->
<iui-swiper :list="list">
<template #indicator="{ current }">
<view class="custom">
<view class="indicator"> {{ current + 1 }}/{{ list.length }} </view>
</view>
</template>
</iui-swiper>
<iui-swiper :list="listWithContent.map((item) => item.image)">
<template #indicator="{ current }">
<view class="custom2">
<view class="content">
<view>{{ listWithContent[current].content }} </view>
<view> {{ current + 1 }}/{{ listWithContent.length }} </view>
</view>
</view>
</template>
</iui-swiper>
<script setup>
// 带有内容的示例
const listWithContent = [
{
image: "https://example.jpg",
content: "This is content 1",
},
{
image: "https://example.jpg",
content: "This is content 2",
},
];
</script><!-- 指示点显示在右侧 -->
<iui-swiper :list="list" indicatorAlign="end"></iui-swiper>
<!-- 指示点显示为线条 -->
<iui-swiper :list="list" indicatorType="line"></iui-swiper>
<!-- 自定义指示点 -->
<iui-swiper :list="list">
<template #indicator="{ current }">
<view class="custom">
<view class="indicator"> {{ current + 1 }}/{{ list.length }} </view>
</view>
</template>
</iui-swiper>
<iui-swiper :list="listWithContent.map((item) => item.image)">
<template #indicator="{ current }">
<view class="custom2">
<view class="content">
<view>{{ listWithContent[current].content }} </view>
<view> {{ current + 1 }}/{{ listWithContent.length }} </view>
</view>
</view>
</template>
</iui-swiper>
<script setup>
// 带有内容的示例
const listWithContent = [
{
image: "https://example.jpg",
content: "This is content 1",
},
{
image: "https://example.jpg",
content: "This is content 2",
},
];
</script>API
<Swiper>props<Swiper>events<Swiper>slots