小程序自定义tabbar

要从根据登录的角色实现左图到右图的动态底部导航栏

先讲一下常规操作在app.json里添加，这是固定的tabbar

 "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/home/main",
      "iconPath": "static/tabs/home.png",
      "selectedIconPath": "static/tabs/home-active.png"
    }, {
      "text": "我的",
      "pagePath": "pages/me/main",
      "iconPath": "static/tabs/me.png",
      "selectedIconPath": "static/tabs/me-active.png"
    }],

    "items": [{
      "name": "首页",
      "pagePath": "pages/home/main",
      "icon": "static/tabs/home.png",
      "activeIcon": "static/tabs/home-active.png"
    }, {
      "name": "我的",
      "pagePath": "pages/me/main",
      "icon": "static/tabs/me.png",
      "activeIcon": "static/tabs/me-active.png"
    }],
    "position": "bottom"
  }

接下来要实现动态底部导航栏的话 先封装一个TabBar.vue组件

<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li class="item"
          v-for="(item, index) in navList" 
          @click="selectNavItem(item.pagePath)"
          :key="index"
        >
          <div class="item-images">
             <img :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath" alt="iconPath">
          </div>
          <p
            class="item-text"
            :class="selectNavIndex === index ? activeColor : 'item-text'"
          >{{item.text}}</p>
        </li>
      </ul>
    </article>
  </section>
</template>
<script>
export default {
  props: {
    selectNavIndex: {
      type: String,
      require: true
    },
    navList: {
      type: Array,
      require: true
    },
    activeColor: {
      type: String,
      require: true
    }
  },
  methods: {
    selectNavItem (pagePath) {
      wx.redirectTo({
        url: pagePath
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tabBar-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background-color: #fff;
  box-shadow: 0px -1px 10px 1px rgba(0,34,58,0.07);
}
.tabBar-nav {
  width: 100%;
  display: flex;
  .item {
    flex: 1;
    text-align: center;
    }
  .item-text {
    color: #BFBFBF;
    font-size: 22rpx;
    transition: 0.24s linear;
    }
    .green{
      color:#009965;
      font-size: 22rpx;
    }
  .blue {
    font-size: 22rpx;
    color: #2F80F6;
    }
  .item-images {
    position: relative;
    width: 38rpx;
    height: 38rpx;
    margin: 16rpx auto 8rpx;
    text-align: center;
    transition: 0.24s linear;
    & img {
    display: inline;
    }
  }
}
</style>

在home.vue和me.vue单页面引用

<template>
  <div>
    <p>
        我是首页
    </p>
    <vueTabBar :selectNavIndex="selectNavIndex" :navList="navList" :activeColor="activeColor"></vueTabBar>

  </div>
</template>
import vueTabBar from '../../components/TabBar'
export default {
  components:{
    vueTabBar
  }
data(){
  return {
    selectNavIndex: null,
    activeColor: '',
    navList: [],
  }
},
onShow(){
    this.selectNavIndex = 0
    if(mpvue.getStorageSync('hasAccretion')){
        this.activeColor = 'green'
        this.navList = [
            {
              selectedIconPath: '../../static/tabs/home-active.png',
              iconPath: '../../static/tabs/home.png',
              pagePath: '/pages/home/main',
              text: '首页'
            },
            {
              selectedIconPath: '../../static/tabs/event_green.png',
              iconPath: '../../static/tabs/event_gray.png',
              pagePath: '/pages/restArea/things/main',
              text: '事件处理'
            },
            {
              selectedIconPath: '../../static/tabs/me-active.png',
              iconPath: '../../static/tabs/me.png',
              pagePath: '/pages/me/main',
              text: '我的'
            }
          ]
    }else{
      this.activeColor = 'blue'
        this.navList = [
          {
            selectedIconPath: '../../static/tabs/home_blue.png',
            iconPath: '../../static/tabs/home.png',
            pagePath: '/pages/home/main',
            text: '首页'
          },
          {
            selectedIconPath: '../../static/tabs/me_blue.png',
            iconPath: '../../static/tabs/me.png',
            pagePath: '/pages/me/main',
            text: '我的'
          }
        ]  
    }
}

       我这是判断不同的登录角色来给予底部导航栏不同的颜色和图标，效果如下