uni-app中如何自定义实现tabbar导航栏_uniapp自定义tabbar

1、首先在page.json中不用再定义tabbar属性

2、在components文件中自定义一个tabbar组件，这里也可以引用uview-ui中的tabbar底部导航栏，我这里就是引用的uview-ui中的tabbar。

3、pages中的4个主页面，分别为Home(首页）、Work（工作）、Message(消息）、My(我的），再创建一个总页面index,将Home、Work、Message、My分别引入到Index总页面，相当于将这4个主页面作为总页面的组件，同时再总页面Index中引入自定义的tabbar标签，这样可以控制对4个主页面的切换，我之前再网上耶看过很多，感觉比较繁琐，所以自己想了一个这种方式实现自定义的tabbar底部导航栏。

4、代码分享如下：

首先是自己引用的tabbar底部导航栏，具体使用查看uview-ui

<template>
  <view>
    <u-tabbar :value="name" :fixed="true" :placeholder="false" activeColor="#d81e06"
      :safeAreaInsetBottom="false" :activeColor="'#F85252'" :inactiveColor="'#BFBFBF'">
      <u-tabbar-item text="首页" name="Home" @click="goPage('Home')" >
        <image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/shouye @2x.png' | getStaticUrl"
          style="width: 50rpx; height: 50rpx;"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/shouye @2x.png'| getStaticUrl"
          style="width: 50rpx; height: 50rpx;">
        </image>
      </u-tabbar-item>
      <u-tabbar-item text="工作" name="Work" @click="goPage('Work')">
        <image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/gongzuo@2x.png' | getStaticUrl"
          style="width: 50rpx; height: 50rpx;"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/gongzuo@2x.png' | getStaticUrl "
          style="width: 50rpx; height: 50rpx;">
        </image>
      </u-tabbar-item>
      <u-tabbar-item text="消息" name="Message" @click="goPage('Message')">
        <image class="u-page__item__slot-icon" slot="active-icon"  :src="'/static/active-icon/xiaoxi@2x.png'| getStaticUrl "
          style="width: 50rpx; height: 50rpx;"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/xiaoxi@2x.png' | getStaticUrl "
          style="width: 50rpx; height: 50rpx;">
        </image>
      </u-tabbar-item>
      <u-tabbar-item text="我的" name="Mine" @click="goPage('Mine')">
        <image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/wode@2x.png'  | getStaticUrl "
          style="width: 50rpx; height: 50rpx;"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/wode@2x.png' | getStaticUrl"
          style="width: 50rpx; height: 50rpx;">
        </image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
 
</template>
 
<script>
  export default {
    props: {
      name: String
    },
    methods:{
      goPage(name){
        this.$emit('changtab', name)
      }
    }
  }
</script>
 
<style lang="scss" scoped>

第二创建总页面Index,然后引入自己写好的4个主页面（home\work\message\my)代码如下：

<template>
  <view class="index-container">
    <view class="index-content">
      <Home v-if="pageFlag === 'Home'" @click="changtab()"></Home>
      <Message v-else-if="pageFlag === 'Message'"></Message>
      <Mine v-else-if="pageFlag === 'Mine'"></Mine>
      <Work v-else-if="pageFlag === 'Work'"></Work>
    </view>
    <tabBar :name="pageFlag" @changtab="changtab()"></tabBar>
  </view>
</template>
 
<script>
  import Mine from '../my/my.vue';
  import Home from "../home/home.vue";
  import Message from "../message/message.vue";
  import Work from "../worklist/worklist.vue";
  export default {
    components: {
      Mine,
      Home,
      Message,
      Work
    },
    data: () => ({
      pageFlag: 'Home'
    }),
    methods: {
      changtab(name) {
        this.pageFlag = name;
      },
    }
  }
</script>
 
<style>
</style>

总页面和4个主页面都是在pages文件夹下创建的，希望对大家有所帮助，不足之处请指教