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

相关推荐
宁&沉沦1 分钟前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir15 分钟前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH1 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390412 小时前
flutter 仿商场_首页
前端
少卿2 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>2 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript