更新记录

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'
            }
        ]
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议