更新记录
1.0.4(2024-11-01)
下载此版本
更新package.json描述信息
1.0.3(2024-10-31)
下载此版本
去掉本地预览图
1.0.2(2024-10-31)
下载此版本
更新功能说明文档及代码操作实例
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
grant-swiper
一款多功能轮播插件
功能 |
是否支持 |
全屏 |
支持 |
半屏 |
支持 |
屏幕高度自定义 |
支持 |
横向 |
支持 |
纵向 |
支持 |
按钮点击 |
支持 |
按钮颜色 |
支持 |
代码
<grant-swiper
:list="list"
boxHeight="300px"
:vertical="false"
:autoplay="false"
@click="handleClick"
>
<template v-slot:indicatorImage>
<view>自定义内容</view>
</template>
</grant-swiper>
属性说明
属性名 |
类型 |
默认值 |
说明 |
list |
Array |
[] |
数据列表 |
keyName |
String |
image |
展示内容字段 |
circle |
Boolean |
false |
是否衔接展示 |
indicator |
Boolean |
false |
显示轮播指示灯 |
autoplay |
Boolean |
true |
自动轮播 |
interval |
Number |
5000 |
自动切换时间间隔 |
duration |
Number |
500 |
滑动动画时长 |
boxHeight |
Number |
300px |
容器及图片的高度 |
vertical |
Boolean |
false |
滑动方向是否为纵向 |
activeIndicatorColor |
String |
"blueviolet" |
指示灯激活颜色 |
defaultIndicatorColor |
String |
"#dfdfdf" |
指示灯默认颜色 |
事件说明
属性名 |
类型 |
数据 |
说明 |
@click |
函数 |
回传当前数据 |
图片/内容点击事件 |
slot 说明
name |
说明 |
indicatorImage |
纵向轮播按钮支持自定义 |