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

相关推荐
IT_陈寒30 分钟前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端38 分钟前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor1 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i1 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor2 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
前端Hardy2 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css