更新记录
1.0.4(2024-04-16)
1.自动轮播间隔默认改成2秒,免得某些大神们因等待时间太久而认为没有自动轮播功能,
2.某些说自动播放失败的,请你直接看我的案例能不能播放,在检查检查自己的代码,恶意差评者请手下留情。
3.播放至某张图片显示不正确的,请检查一下网络控制台是否图片加载报错了。
4.案例的图片都用的网络图片,某些图片也比较大,加载可能比较慢,或者加载不出来,就算源网站把图片删了也有可能,所以使用者们,请用心点,如果你是小白,遇到问题或者不懂的可以私信
1.0.3(2023-05-14)
1.修复一个小bug,如果siwperList长度变化时v-model > swiperList的长度会引起错乱,修复结果为如果大于长度则强制change为长度-1
1.0.2(2023-05-14)
1.watch监听swiperList,数据有变动重新渲染,感谢评论区‘Genoss’给的建议
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
kw-swiper
kw-swiper 卡片式堆叠式轮播图
组件名:kw-swiper
属性说明
属性名 |
类型 |
默认值 |
可选值 |
说明 |
v-model |
String |
-- |
-- |
当前下标,双向绑定值 |
type |
String |
screen |
screen/card/tower |
轮播类型 screen 全屏样式 card 卡片样式 tower 堆叠样式 |
swiper-list |
Array |
[] |
|
列表数据,由多个swiperListItem对象组成,具体参考swiperListItem属性说明 |
dotStyle |
String |
square |
square/round/none |
dot点样式 round 圆形,square 方形, none 无 |
circular |
Boolean |
true |
- |
是否采用衔接滑动,即播放到末尾后重新回到开头 |
autoplay |
Boolean |
false |
- |
是否自动切换 |
interval |
Number |
5000 |
- |
自动切换时间间隔 |
duration |
Number |
500 |
- |
滑动动画时长 |
indicator-color |
String |
- |
- |
指示点颜色 |
indicator-active-color |
String |
- |
- |
当前选中的指示点颜色 |
height |
Number |
220 |
- |
高度 |
swiperListItem属性说明
属性名 |
类型 |
可选值 |
说明 |
id |
String/Number |
-- |
点击swiper-item时的标识 |
url |
String |
-- |
图片或视频资源地址 |
type |
String |
image/video |
当前下标,双向绑定值 |
swiper-item事件说明
属性名 |
类型 |
参数 |
说明 |
onTap |
Event |
id |
swiper元素点击事件,参数是siwperitem属性里的id |
1.自定义轮播图指示点
2.可配置轮播图样式
如使用过程中有任何问题,或者您有一些好的建议,欢迎私信或留言