更新记录

1.1(2022-07-19) 下载此版本

1.0(2022-07-19) 下载此版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

有左右按钮的swiper

组件名:woo-swipe

1、在uni-swipe的基础上改版。 2、web端和小程序端已测试。 3、有左右选择上一张下一张,自定义样式非常简单。

使用方式:

script 中引用组件

import wooSwiper from "@/components/woo-swiper/woo-swiper.vue";
export default {
    components:{wooSwiper},
    name: 'codeCard',
    data() {
        return {
            list:[
                    {src:'https://cdn.uviewui.com/uview/demo/transition/fade.png', text:"凭证码:3HDKF7B4SZ"},
                    {src:'https://cdn.uviewui.com/uview/demo/transition/zoom.png', text:"凭证码:9KSDDF84BD"},
                ]
        };
    }
};

template 中使用组件

    <woo-swiper :list="list"></woo-swiper>

属性说明:

属性名 类型 默认值 说明
list Array - 数组
height Number 300 高度,单位upx
width Number 300 轮播图片宽度,单位upx
showIndex boolean true 是否显示顶部索引文字
easing String easeInOutCubic 指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic(非必需,仅小程序有效)

list 列表 属性说明:

属性名 类型 默认值 说明
src String - 图片路径
text String - 显示文本

例如:

[
    {src:'https://cdn.uviewui.com/uview/demo/transition/fade.png', text:"凭证码:3HDKF7B4SZ"},
    {src:'https://cdn.uviewui.com/uview/demo/transition/zoom.png', text:"凭证码:9KSDDF84BD"},
]

事件说明:

属性名 说明
@change 切换轮播图时,返回当前图片索引

返回数据:

change(index){
    // index为当前图片索引
}

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问