更新记录

1.0.0（2025-03-21） 下载此版本

初始版本1.0.0

平台兼容性

uni-app

项目介绍

微信小程序端凸起自定义tabbar，基于微信官方示例修改成uniapp版本。

你需要做的

1. 在App.vue中定义全局参数selected

// 配置路径： App.vue
<script>
    export default {
        globalData: {
            selected: 0
        },

        onLaunch: function() {
            console.log('App Launch')
        }
    }
</script>

2. 将示例代码根目录下custom-tab-bar复制到你项目根目录下

3. 修改custom-tab-bar/index.js中的list参数，跟pages.json中定义的tabbar保持一致，将需要凸起的那项增加属性bulge

// 配置路径：custom-tab-bar/index.js
list: [{
        pagePath: "/pages/index/index",
        iconPath: "/static/tabbar/shop.png",
        selectedIconPath: "/static/tabbar/shop-active.png",
        text: "商城"
    }, {
        pagePath: "/pages/cart/cart",
        iconPath: "/static/tabbar/cart.png",
        selectedIconPath: "/static/tabbar/cart-active.png",
        text: "购物车"
    },
    {
        pagePath: "/pages/qrcode/qrcode",
        iconPath: "/static/logo.png",
        selectedIconPath: "/static/logo.png",
        text: "",
        bulge: true,
    }, {
        pagePath: "/pages/device/device",
        iconPath: "/static/tabbar/device.png",
        selectedIconPath: "/static/tabbar/device-active.png",
        text: "设备管理"
    },
    {
        pagePath: "/pages/self/self",
        iconPath: "/static/tabbar/user.png",
        selectedIconPath: "/static/tabbar/user-active.png",
        text: "商城"
    }
]

4. 在pages.json 中的 tabbar 项指定 custom 字段

// 配置路径：pages.json
"tabBar": {
    "color": "#515151",
    "selectedColor": "#ff3366",
    "custom": true,
    // ...其他配置项
},