更新记录
1.0.1(2026-05-28) 下载此版本
新增文档和微信白屏事项
1.0.0(2024-10-08) 下载此版本
支持默认选中项
1.4(2021-11-12) 下载此版本
删除无用代码
查看更多平台兼容性
uni-app(3.7.8)
| Vue2 | Vue2插件版本 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|---|
| √ | 1.0.0 | √ | √ | √ | √ | √ | √ | √ | √ |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
kong-swiper
使用说明
tips
属性与swiper组件一致,并新增以下属性
| 属 性 名 | 类 型 | 说 明 |
|---|---|---|
| swiperList | Array | 主数据 |
| spaceBetween | String | swiperItem之间的距离(内边距) |
| borderRadius | String | swiperItem的圆角 |
| 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向父组件传递数据 注意微信小程序中插槽会自动添加一层view标签导致插槽内容无法获取上级宽高,即不可使用宽高100%,评论区中提到的微信小程序白屏就是此问题
| 属 性 名 | 类 型 | 说 明 |
|---|---|---|
| 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'
}
]
}
}

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 1823
赞赏 0
下载 12284005
赞赏 1922
赞赏
京公网安备:11010802035340号