Appearance

iuiDesign
100%
02:32
本页目录

用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。

基本使用 ​

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
参数描述类型默认值
modelValue (v-model)当前所在滑块的 indexNumber0
list图片列表Array[]
indicator是否显示指示点Booleantrue
indicatorColor指示点颜色Stringrgba(255, 255, 255, 0.4)
indicatorActiveColor当前选中的指示点颜色String#FFFFFF
indicatorType指示点样式dot | linedot
indicatorAlign对齐（仅横向滚动有效）start | center | endcenter
autoplay自动播放Booleantrue
interval自动播放间隔时长Number5000
circular循环滑动Booleantrue
direction滑动方向horizontal | verticalhorizontal
height图片高度Number140
width图片宽度Number100
radius图片圆角Number0
margin图片前后间距Number0
zoom突出显示当前项Booleanfalse
<Swiper>events
事件名描述参数
change切换时触发e:Event
<Swiper>slots
插槽名描述参数
indicator自定义指示点当前索引 current: Number