免费AI编程助手
快应用 swiper组件
2020-08-06 13:47 更新
概述
滑块视图容器
子组件
支持
属性
支持 通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| index | <number>
|
０ | 否 | 当前显示的子组件索引 |
| autoplay | <boolean>
|
false | 否 | 渲染完成后，是否自动进行播放 |
| interval | <number>
|
3000ms | 否 | 自动播放时的时间间隔，单位毫秒 |
| indicator | <boolean>
|
true | 否 | 是否启用 indicator，默认 true |
loop 1010+
|
<boolean>
|
true | 否 | 是否开启循环模式，1030及以下版本子组件数量大于 2 时才生效 |
duration 1040+
|
<number>
|
- | 否 | 滑动动画时长(duration默认根据手指的速度动态计算) |
vertical 1040+
|
<boolean>
|
false | 否 | 滑动方向是否为纵向,纵向时indicator 也为纵向 |
previousmargin 1040+
|
<string>
|
0px | 否 | 前边距，可用于露出前一项的一小部分，支持单位：px和% |
nextmargin 1040+
|
<string>
|
0px | 否 | 后边距，可用于露出后一项的一小部分，支持单位：px和% |
备注：previousmargin和nextmargin的总和不应该超过整个swiper大小的1/2，超过部分将会被截取。
样式
支持 通用样式
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| indicator-color | <color>
|
rgba(0, 0, 0, 0.5) | 否 | indicator填充颜色 |
| indicator-selected-color | <color>
|
#33b4ff 或者 rgb(51, 180, 255) | 否 | indicator选中时的颜色 |
| indicator-size | <length>
|
20px | 否 | indicator组件的直径大小 |
| indicator-[top|left|right|bottom] | <length>
|
- | 否 | indicator相对于swiper的位置 |
事件
支持 通用事件
| 名称 | 参数 | 描述 |
|---|---|---|
| change | {index:currentIndex} | 当前显示的组件索引变化时触发 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| swipeTo | {index: number(指定位置)} | swiper滚动到index位置 |
swiper 示例代码
查看 示例代码
以上内容是否对您有帮助：
更多建议：