Vue实现自定义tabbar

<template>
  <div class="tabbar footer">
     <div class="tabbar-item" v-for="(item,index) in tabbarList" :key="index" @click="switchTab(item)">
       <div class="tab_icon">
         <img
           :src="item.pageUrl == $route.path?item.activeImg:item.normalImg"
           width="48px"
           alt=""
         />
         <!-- 气泡 -->
         <div class="msg" v-if="item.isShowBubble">
          99
         </div>
       </div>
       <h3 :class="[item.pageUrl == $route.path?textStyleLight:textStyleDark]">{{item.text}}</h3>
     </div>
   </div>
</template>
<script>

export default {
  data () {
    return {
      textStyleLight : 'textStyleLight',
      textStyleDark : 'textStyleDark',
      tabbarList : [
            {
                text : '首页',
                pageUrl : '',
                activeImg : '',
                disactiveImg : '',
                isShowBubble : false
            },
            {
                text : '权益中心',
                pageUrl : '',
                activeImg : '',
                disactiveImg : '',
                isShowBubble : false
            },
            {
                text : '我的',
                pageUrl : '',
                activeImg : '',
                disactiveImg : '',
                isShowBubble : false
            }
        ],
    }
  },
  methods: {
    switchTab (res) {
      if( res.pageUrl == this.$route.path ) return;
      this.$router.push(res.pageUrl)
    }
  }
}
</script>
<style lang="less">
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  padding: .04rem .36rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  .tabbar-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    .tab_icon{
      position: relative;
      .msg{
        position: absolute;
        top: 0;
        left: 65%;
        width: 0.18rem;
        height: 0.18rem;
        border-radius: 50%;
        text-align: center;
        font: 400 0.13rem PingFangSC-Semibold, PingFang SC;
        color: #fff;
        background-color: #ff4668;
      }
    }
    .textStyleLight,.textStyleDark {
      margin: 0;
      font: 600 0.12rem PingFangSC-Semibold, PingFang SC;
    }
    .textStyleLight {
      color: #4865ff;
    }
    .textStyleDark{
      color: #999;
    }
  }
}
// 适配iPhone X以上机型底部栏
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>