在正式开始代码之前，我们首先了解一下uni-app的easycom机制。传统vue项目开发，引用组件需要导入 - 注册 - 使用三个步骤。而uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册。

即只需要按照uni-app的easycom机制规则（根目录下创建components文件夹，components文件夹内创建组件文件夹，组件文件夹内创建和文件夹同名的vue文件）创建组件，可以在页面中直接引用组件，省去了导入注册的过程。但是需要注意的是：组件命名规则为“my-component”，通过“-”连接的方式命名。

配置pages.json文件，确定tabbar页面

首先需要在根目录下的pages.json文件中配置tabbar属性，配置你的底部tabbar页面。

在属性tabBar下面配置list数组，数组中只需要配置pagePath和text即可，其他内容自定义就行。

注意：有几个tabbar页面就配置几个，否则会报错。以下面两个为例。

 // pages.json
"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
    }, {
       "pagePath": "pages/my/my",
       "text": "我的"
    }]
},

创建tabbar组件

在项目根目录下创建components文件夹，然后在该文件下面创建同名目录的组件tab-bar，即文件夹名字为tab-bar，文件名字为tab-bar.vue。

 // tab-bar.vue
<template>
  <view>
    <u-tabbar @change="changeTab" :value="tabIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#09C272" inactiveColor="#7d7e80">
      <u-tabbar-item :text="item.text" :name="item.name" icon="home" v-for="item in tabList" v-bind:key="item.name" @click="tabClick(item.path)">
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>
<script>
export default {
  name: 'tabbar',
  props: {
    tabIndex: {
       type: Number,
       default: 0
    }
  },
  data() {
    return {
       tabList: [
        {
          text: '首页',
          name: 0,
          icon: 'home',
          path: '/pages/index/index'
        },
        {
          text: '我的',
          name: 1,
          icon: 'account',
          path: '/pages/my/my'
        }
      ]
    };
  },
  methods: {
     changeTab(e) {},
     tabClick(path) {
        // console.log(e);
         uni.switchTab({
            url: path
         });
      }
    }
  };
</script>

上面代码为完成的配合uView框架的Tabbar 底部导航栏组件来完成的自定义文件。其中props属性中的tabIndex字段为当前选中的索引，通过tabbar主页面传递过来的索引，来选中当前标签。主要用来解决自定义组件跳转时不能及时选中组件的bug。

自定义组件中的其他参数属性，可转移uView官网详情了解，这里不做过多赘述。

使用tabbar组件

然后就是在tabbar页面引入自定义的tabbar组件。本案例中实在pages/index/index和pages/my/my文件中引入tabbar组件。以index.vue为例。直接引入”<tab-bar :tabIndex=”0″></tab-bar>“组件即可，然后传入当前页面索引值即可，简单明了。

 // pages/index/index
<template>
    <tab-bar :tabIndex="0"></tab-bar>
</template>

这个时候打开你会发现，自定义导航完美适配，而且比原生导航好看很多。

避免的小bug

当你引入自定义tabbar导航的时候，第一次加载进去你会发现原生导航会覆盖自定的导航。所以当页面启动的时候，隐藏到原生导航即可。

在App.vue文件的onLaunch方法中使用“uni.hideTabBar()”方法，隐藏原生的底部导航即可。

 // App.vue
<script>
export default {
    onLaunch: function () {
      console.log('App Launch');
      uni.hideTabBar();
    }
};
</script>