yanxiang_h5/components/tabBar/index.vue

<template>
  <view class="tabBar" :placeholder='false'>
    <u-tabbar fixed style="height: 93px;" :value="tabbarValue" activeColor="#eb5a10" inactiveColor="#bdbdbd">
      <u-tabbar-item v-if="!isSingle" class="tabBarItem" text="企业看板" name="企业看板" @click="tabClick('企业看板')">
        <img class="icon" slot="active-icon" src="../../static/img/qiye-active.png" alt=""/>
        <img class="icon" slot="inactive-icon" src="../../static/img/qiye.png" alt=""/>
      </u-tabbar-item>
      <u-tabbar-item class="tabBarItem" text="我的看板" name="我的看板" @click="tabClick('我的看板')">
        <img class="icon" slot="active-icon" src="../../static/img/me-active.png" alt=""/>
        <img class="icon" slot="inactive-icon" src="../../static/img/me.png" alt=""/>
      </u-tabbar-item>
      <u-tabbar-item class="tabBarItem" text="分享给我" name="分享给我" @click="tabClick('分享给我')">
        <img class="icon" slot="active-icon" src="../../static/img/fenxiang-active.png" alt=""/>
        <img class="icon" slot="inactive-icon" src="../../static/img/fenxiang.png" alt=""/>
      </u-tabbar-item>
      <u-tabbar-item class="tabBarItem" text="移动应用" name="移动应用" @click="tabClick('移动应用')">
        <img class="icon" slot="active-icon" src="../../static/img/apps-active.png" alt=""/>
        <img class="icon" slot="inactive-icon" src="../../static/img/apps.png" alt=""/>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>

export default {
  name: "tabBar",
  props: {
    tabbarValue: {
      type: String,
      default: '',

    }
  },
  computed: {
    isSingle() {
      return this.$store.state.$userInfo.isSingle
    }
  },
  data() {
    return {
      // tabbarValue: '企业看板'
    };
  },
  methods: {
    tabClick(val) {
      if (val == '企业看板') {
        uni.reLaunch({url: '/pages/home/home'})
      } else if (val == '我的看板') {
        uni.reLaunch({url: '/pages/home/me'})
      } else if (val == '分享给我') {
        uni.reLaunch({url: '/pages/home/share'})
      } else if (val == '移动应用') {
        uni.reLaunch({url: '/pages/home/apps'})
      }
    }
  }
}
</script>
<style lang="less">
.tabBar {
  width: 100%;
  height: 186rpx;
  background-color: #fff;
  .tabBarItem {
    height: 186rpx;
    .icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
::v-deep .u-tabbar__content__item-wrapper {
  height: 186rpx !important;
}
</style>