更新记录

1.0.2(2022-03-19) 下载此版本

1.修复初始化选中项 2.修复初始化颜色

1.0.1(2022-03-19) 下载此版本

更新文档 fix bug

1.0(2022-03-18) 下载此版本

1.0发布

查看更多

平台兼容性

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

效果

效果图

示例

    uniapp 引用 import CTabbar from "../../components/Chad-CTabbar/Chad-CTabbar.vue"

    vue npm安装引用 import CTabbar from 'chad-tabbar'
    components: {
            CTabbar
    }
    <CTabbar 
        :tabbarList="tabbarList" 
        :MainColor="'#d4237a'"
        :ViceColor="'#7f8c8d'"
        @currentClick="currentClick" />
-  tabbarList: [{
                    ImgUrl: '/static/c-tabbar/img/home.png',
                    AcImgUrl:"/static/c-tabbar/img/home-c.png",
                    text: '首页',
                    router: '/agency',
                },
                {
                    ImgUrl: '/static/c-tabbar/img/cart.png',
                    AcImgUrl:"/static/c-tabbar/img/cart-c.png",
                    text: '购物车',
                    router: '/census',
                },
                {
                    ImgUrl: '/static/c-tabbar/img/hot.png',
                    AcImgUrl:"/static/c-tabbar/img/hot-c.png",
                    text: '热门',
                    router: '/workbench',
                },
                {
                    ImgUrl: '/static/c-tabbar/img/file.png',
                    AcImgUrl:"/static/c-tabbar/img/file-c.png",
                    text: '文件',
                    router: '/addressbook',
                },
                {
                    ImgUrl: '/static/c-tabbar/img/my.png',
                    AcImgUrl:"/static/c-tabbar/img/my-c.png",
                    text: '我的',
                    router: '/my',
                },
            ]

tip

vue 引用 需要 安装 node-sass 和 sass-loader

  npm i -D node-sass sass-loader

todo

此版本仅支持5项tabbar

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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