更新记录
1.4(2021-11-12)
删除无用代码
1.3(2021-11-06)
删除误上传的json文件
1.2(2021-11-05)
更新组件可使用插槽
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用说明
tips
属性与swiper组件一致,并新增以下属性
属 性 名 |
类 型 |
说 明 |
swiperList |
Array |
主数据 |
spaceBetween |
String |
swiper之间的距离(内边距) |
borderRadius |
String |
图片圆角 |
scale |
String,Number |
缩放 |
tips
事件与swiper组件一致,并新增以下事件
事 件 名 |
类 型 |
说 明 |
click |
click |
返回点击项的索引 |
<kong-swiper class="swiper" :swiperList="list" next-margin="46rpx" previous-margin="46rpx" space-between="20rpx" scale="0.8" circular></kong-swiper>
插槽使用
slot向父组件传递数据
属 性 名 |
类 型 |
说 明 |
swiperItem |
all |
swiper项的数据 |
swiperCurrent |
Number |
swiper项索引 |
<kong-swiper class="swiper"
:swiperList="list"
next-margin="46rpx"
previous-margin="46rpx"
space-between="20rpx"
:scale="0.8"
circular
>
<template v-slot:default="{swiperItem,swiperCurrent}">
<image class="img" :src="swiperItem.image" mode=""></image>
</template>
</kong-swiper>
data() {
return {
list: [
{
image: '../../static/banner.png'
},
{
image: '../../static/banner.png'
},
{
image: '../../static/banner.png'
}
]
}
}