本文精讲Swiper所有属性,无需繁琐说明,直接上干货!
📌 基础显示控制
属性 | 类型 | 默认值 | 说明 |
---|
indicator-dots | Boolean | false | 是否显示面板指示点 |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | Color | #000000 | 当前选中指示点颜色 |
🔄 自动播放设置
属性 | 类型 | 默认值 | 说明 |
---|
autoplay | Boolean | false | 是否自动切换 |
interval | Number | 5000 | 自动切换时间间隔(ms) |
circular | Boolean | false | 是否循环播放 |
🎯 滑动控制属性
属性 | 类型 | 默认值 | 说明 |
---|
current | Number | 0 | 当前所在滑块的index |
duration | Number | 500 | 滑动动画时长(ms) |
vertical | Boolean | false | 是否纵向滑动 |
disable-touch | Boolean | false | 是否禁止用户触摸操作 |
👀 视觉布局特效
属性 | 类型 | 默认值 | 说明 | 平台限制 |
---|
previous-margin | String | 0px | 前边距,露出前一项部分内容 | 部分平台不支持 |
next-margin | String | 0px | 后边距,露出后一项部分内容 | 部分平台不支持 |
display-multiple-items | Number | 1 | 同时显示的滑块数量 | 部分平台不支持 |
💡 高级功能属性
属性 | 类型 | 默认值 | 说明 | 平台 |
---|
acceleration | Boolean | false | 根据滑动速度连续滑动多屏 | 支付宝 |
active-class | String | - | swiper-item可见时的class | 支付宝 |
changing-class | String | - | 滑动过程中的可见class | 支付宝 |
📢 事件监听处理
事件 | 触发时机 | 返回值 |
---|
@change | current改变时 | {current, source} |
@transition | 位置改变时 | {dx, dy} |
@animationfinish | 动画结束时 | {current, source} |
⚠️ 重要提醒
previous-margin
、next-margin
:app-nvue、抖音、飞书小程序不支持display-multiple-items
:app-nvue、支付宝、小红书小程序不支持- 使用前请确认目标平台的兼容性!
💡 收藏本文,开发时随时查阅!如有疑问欢迎留言讨论~