手册版本 V6.0
组件名称
gui-swiper : GraceUI 组件目录/gui-swiper.vue
重要说明
01 组件宽度高度算法 ( 所有轮播图的宽高比应该是一样的哦 )
组件宽度 = 外层元素宽度 如 700rpx
组件高度 = 轮播图高度 / 轮播图宽度 * 组件宽度，如 轮播图片为 500 px * 225 px, 那么 :
组件高度 = 225 / 500 * 700 = 315 rpx
02 请参考演示代码利用属性配置出各种形式的轮播组件;
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| width | Number | 750 | 组件宽度，单位 rpx |
| height | Number | 300 | 组件高度，单位 rpx |
| swiperItems | Array | [] | 轮播项目数组，格式见演示代码 |
| borderRadius | String | 10rpx | 图片圆角尺寸 |
| indicatorBarHeight | Number | 68 | 进度圆点或标题文本高度，单位 rpx |
| indicatorBarBgClass | Array | ['gui-bg-black-opacity5'] | 数字进度背景样式 |
| indicatorWidth | Number | 18 | 进度圆点宽度，单位 rpx |
| indicatorActiveWidth | Number | 18 | 进度圆点激活后宽度，单位 rpx |
| indicatorHeight | Number | 18 | 进度圆点高度，单位 rpx |
| indicatorRadius | Number | 18 | 进度圆点圆角尺寸，单位 rpx |
| indicatorClass | Array | ['gui-bg-gray','gui-dark-bg-level-5'] | 进度圆点样式 |
| indicatorActiveClass | String | ['gui-bg-primary'] | 进度圆点激活后样式 |
| indicatorType | String | dot | none : 不展示圆点, dot : 可修饰的圆点, number : 数值+文本形式 |
| indicatorPosition | String | absolute | 圆点定位方式,赋值 relative 可以实现圆点在轮播图片下方 |
| indicatorDirection | String | center | 圆点点横向对齐方式，默认 center 居中, flex-start 左对齐, flex-end 右对齐 |
| spacing | Number | 50 | 轮播项目间距 [ nvue 不支持 ] |
| padding | Number | 26 | 非激活项目的缩小间距 [ nvue 不支持 ] |
| interval | Number | 5000 | 自动轮播间隔时间 |
| autoplay | Boolean | true | 是否自动播放 |
| currentIndex | Number | 0 | 当前激活项目索引 |
| opacity | Number | 0.66 | 非激活项目透明度 |
| titleColor | String | #FFFFFF | 标题文本颜色 |
| titleSize | String | 28rpx | 标题文本大小 |
| imgMode | String | widthFix | 内部图片组件的图片裁剪、缩放的模式 |
组件事件
01. @swiperchange
轮播选项切换时触发，携带参数 : 当前轮播项目的索引值。
02 @taped
当选项数据的 opentype 为 click 时，用户点击选项触发并携带当前点击选项的索引值;
演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
