You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.9 KiB
52 lines
2.9 KiB
2 years ago
|
# hd-swiper
|
||
|
|
|
||
|
|
Swipeer 轮播图
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
<!-- @vuese:hd-swiper:props:start -->
|
||
|
|
|Name|Description|Type|Required|Default|
|
||
|
|
|---|---|---|---|---|
|
||
|
|
|swiperList|图片数组|`Array`|`false`|[]|
|
||
|
|
|videoAutoplay|是否自动播放视频|`Boolean`|`false`|默认值是：`false`|
|
||
|
|
|videoKey|视频映射的键(字段名)|`String`|`false`|默认值：`video`|
|
||
|
|
|imageKey|图片映射的键(字段名)|`String`|`false`|默认值：`img`|
|
||
|
|
|textKey|文字说明映射的键(字段名)|`String`|`false`|默认值：`text`|
|
||
|
|
|showTextTip|是否展示图片文字说明|`Boolean`|`false`|默认值是：`false`|
|
||
|
|
|textStyleSize|图片文字大小|`Number`|`false`|默认值是：`24`|
|
||
|
|
|textStyleBottom|图片文字底部距离|`Number`|`false`|默认值是：`5`|
|
||
|
|
|textStyleRight|图片文字右侧距离|`Number`|`false`|默认值是：`5`|
|
||
|
|
|textStyleColor|图片文字颜色|`String`|`false`|默认值是：`#ffffff`|
|
||
|
|
|textStyleBgcolor|图片文字背景色|`String`|`false`|默认值是：`transparent`|
|
||
|
|
|rate|宽高比 推荐 w/h => 2|`Number`|`false`|默认值是：`2`|
|
||
|
|
|skipHiddenItemLayout|是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 App、微信小程序支持|`Boolean`|`false`|默认值是：`false`|
|
||
|
|
|displayMultipleItems|同时显示的滑块数量 支付宝钉钉不支持|`Number`|`false`|默认值是：`1`|
|
||
|
|
|nextMargin|后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持|`String`|`false`|默认值是：`0px`|
|
||
|
|
|previousMargin|前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持|`String`|`false`|默认值是：`0px`|
|
||
|
|
|vertical|滑动方向是否为纵向 卡牌 不支持纵向以及同时显示的2块以上滑块数量|`Boolean`|`false`|默认值是：`true`|
|
||
|
|
|circular|是否采用衔接滑动|`Boolean`|`false`|默认值是：`true`|
|
||
|
|
|duration|滑动动画时长|`Number`|`false`|默认值是：`400`|
|
||
|
|
|interval|自动切换时间间隔|`Number`|`false`|默认值是：`2500`|
|
||
|
|
|current|当前所在滑块的下标|`Number`|`false`|默认值是：`0`|
|
||
|
|
|autoplay|是否自动切换|`Boolean`|`false`|默认值是：`true`|
|
||
|
|
|indicatorColor|指示点颜色|`String`|`false`|默认值是：`#CCCCCC`|
|
||
|
|
|indicatorActiveColor|当前选中的指示点颜色|`String`|`false`|默认值是：`#ffffff`|
|
||
|
|
|indicatorDots|是否显示面板指示点|`Boolean`|`false`|默认值是：`true`|
|
||
|
|
|card|是否卡片样式|`Boolean`|`false`|默认值是：`false`|
|
||
|
|
|
||
|
|
<!-- @vuese:hd-swiper:props:end -->
|
||
|
|
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
<!-- @vuese:hd-swiper:events:start -->
|
||
|
|
|Event Name|Description|Parameters|
|
||
|
|
|---|---|---|
|
||
|
|
|clickItem|滑块被点击时触发|value:Object 滑块值|
|
||
|
|
|change|激活滑块变更时触发|value:Object 滑块值|
|
||
|
|
|animationfinish|滑块动画结束时触发|value:Object 滑块值|
|
||
|
|
|
||
|
|
<!-- @vuese:hd-swiper:events:end -->
|
||
|
|
|
||
|
|
|