UniApp 内置组件：`<swiper>` 详解

在 UniApp 中，<swiper> 是用于实现轮播图效果的内置组件。本篇文章将详细介绍 <swiper> 组件的使用方法，API 和属性。

简介

<swiper> 组件提供了一种方便的方式来实现内容的轮播展示。

示例

<swiper :indicator-dots="true" :autoplay="true">
  <swiper-item v-for="(item, index) in images" :key="index">
    <image :src="item" />
  </swiper-item>
</swiper>

属性

基础属性

• indicator-dots: 是否显示面板指示点，默认为 false。
• indicator-color: 指示点颜色，默认为 rgba(0, 0, 0, .3)。
• indicator-active-color: 当前选中的指示点颜色，默认为 #000000。
• autoplay: 是否自动切换，默认为 false。

高级属性

• current: 当前所在滑块的 index。
• interval: 自动切换时间间隔，默认为 5000（单位 ms）。
• duration: 滑动动画时长，默认为 500（单位 ms）。
• circular: 是否采用衔接滑动，默认为 false。
• vertical: 滑动方向是否为纵向，默认为 false。

事件

• change: current 改变时会触发 change 事件，event.detail = {current, source}。
• transition: swiper-item 的位置发生改变时会触发 transition 事件。
• animationfinish: 动画结束时会触发 animationfinish 事件。

注意事项

• <swiper> 组件内只应该放置 <swiper-item> 组件，否则会导致未定义的行为。

---

参考链接

• UniApp 官方文档 - swiper

在这篇文章中，我们详细介绍了 UniApp 的 <swiper> 组件，包括了各种属性和事件。希望能帮助您更有效地使用这个组件。

更多 UniApp 内置组件的详解，敬请期待。