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

在 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 内置组件的详解,敬请期待。

相关推荐
excel35 分钟前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼1 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode5 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu5 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu5 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu5 小时前
【js篇】call() 与 apply()深度对比
前端·javascript