1.来先看效果图：

 2.在uniapp里tabbar不能完全满足客户需求，所以这就需要开发者自定义封装一个底部导航组件。

 3.先在components里创建一个tabbar.vue

  具体代码：

<template>
   <!-- 底部导航 -->
   <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
      <view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
         <image class="item-img" :src="item.iconPath" v-if="current == index"></image>
         <image class="item-img1" :src="item.icon" v-else></image>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         current: String
      },
      data() {
         return {
            paddingBottomHeight: 0, //苹果X以上手机底部适配高度
            list: [{
                  text: '', //首页
                  icon: '/static/tabbar/index.png', //未选中图标
                  iconPath: '/static/tabbar/indexSelected.png', //选中图片
                  path: "/pages/index/index/index", //页面路径
               },
               {
                  text: '', //喜欢
                  icon: '/static/tabbar/like.png',
                  iconPath: '/static/tabbar/likeSelected.png',
                  path: "/pages/like/like/like",
               },
               {
                  text: '', //通知
                  icon: '/static/tabbar/notice.png',
                  iconPath: '/static/tabbar/noticeSelected.png',
                  path: '/pages/notice/notice/notice',
               },
               {
                  text: '', //我的
                  icon: '/static/tabbar/my.png',
                  iconPath: '/static/tabbar/mySelected.png',
                  path: "/pages/my/my/my",
               }
            ]
         };
      },
      created() {
         let that = this;
         uni.getSystemInfo({
            success: function(res) {
               let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
               model.forEach(item => {
                  //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
                  if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
                     that.paddingBottomHeight = 40;
                  }
               })
            }
         });
      },
      watch: {

      },
      methods: {
         tabbarChange(path) {
            uni.switchTab({
               url: path
            })
         }
      }
   };
</script>

<style scoped>
   .tabbarActive {
      color: #79D5AD !important;
   }

   .tabbar {
      position: fixed;
      bottom: 48rpx;
      left: 45rpx;
      right: 30rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 600rpx;
      height: 126rpx;
      border-radius: 100rpx;
      background-color: #F5F6F7;
      padding: 0 30rpx;
			z-index: 99;
   }

   .tabbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100rpx;
   }
   
   /* 选中后 */
   .item-img {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
      box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;
   }
   
   /* 选中前 */
   .item-img1 {
      width: 50rpx;
      height: 50rpx;
   }

</style>

4. 重要的一步，在引用tabbar之前，先到pages.json里配置一下tabbar的基本路径，只需要路径就  行

 5.在要使用的底部导航页面引用 ../../components/tabbar.vue。

 再看具体代码：

<template>
    <view>
        <Tabbar :current="'2'"></Tabbar>
    </view>
</template>

<script>
    import Tabbar from '@/components/tabbar.vue'
    export default {
        components: {
            Tabbar
        }, 
        onShow() {
            uni.hideTabBar({
                animation: false
            })
        },
    }
</script>

注意：这里有个坑，<Tabbar :current="'2'"></Tabbar>