在 UniApp 中,<swiper> 是用于实现轮播图效果的内置组件。本篇文章将详细介绍 <swiper> 组件的使用方法,API 和属性。
简介
<swiper> 组件提供了一种方便的方式来实现内容的轮播展示。
示例
            
            
              html
              
              
            
          
          <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 内置组件的详解,敬请期待。