uni-app自定义tabbar底部导航

uni-app中原生tabbar配置和小程序差不多，具体配置查看这篇文章
https://uniapp.dcloud.io/collocation/pages?id=tabbar

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

在pages.json中如果没有配置tabBar参数，uni-app中就不会显示底部tabbar，可以通过自定义组件形式来实现想要的自定义tabbar效果。
如下图：在H5端、小程序、App端 下显示的自定义tabbar效果

新建tabbar.vue组件，并在main.js里面引入全局组件

    
        
            
            {{item.badge}}
            
            
        {{item.text}}
    

import tabBar from './components/tabbar.vue'
Vue.component('tab-bar', tabBar)

在页面中引入tabbar，并自定义tabbar属性参数

data() {
    return {
        ...
        currentTabIndex: 1
    }
},
methods: {
    tabClick(index){
        console.log('返回tabBar索引：' + index)
        this.currentTabIndex = index
    },
    ...
},

Tabbar组件已经发布至uniapp插件市场，免费下载使用。

https://ext.dcloud.net.cn/plugin?id=5593

上图实例中uni-app自定义顶部导航栏
https://blog.csdn.net/yanxinyun1990/article/details/100919657