Taro + Vue 自定义标签栏TabBar_taro vue自定义tabbar

、1、app.config.ts：自定义TabBar就必须将custom设为true

2、 定义TabBar组件：

 customTabBar.vue

<template>
  <view class='bottom-tab'>
    <view class='bottom-tab-item' v-for="(tabItem, index) in list" :key="tabItem.key"  @tap="switchTab(tabItem.pagePath, index)">
        <image class='bottom-tab-item-img' :src="selected == index ? tabItem.selectedIconPath : tabItem.iconPath " />
        <view class='bottom-tab-item-text' :style="{color:(selected==index?selectedColor:color)}" >
          {{tabItem.text}}
        </view>
    </view>
  </view>
</template>
<script>
import './customTabBar.scss'
import Taro from '@tarojs/taro'
import commonUtil from "../../utils/util.ts"
import {
} from "taro-ui-vue3"
export default {
  components: {
  },
  data () {
    return {
      selected: 0,
      color: 'rgba(68, 68, 68, 1)',
      selectedColor: 'rgba(68, 68, 68, 1)',
      list: [
        {
          "pagePath": "pages/tabBarPackages/home/home",
          "iconPath": "../../../images/foot_1.png",
          "selectedIconPath": "../../../images/foot_1.png",
          "text": "首页",
        },
        {
          "pagePath": "pages/tabBarPackages/userList/userList",
          "text": "用户",
          "iconPath": "../../../images/foot_2.png",
          "selectedIconPath": "../../../images/foot_2.png"
        },
        {
          "pagePath": "pages/tabBarPackages/userAdd/userAdd",
          "text": "",
          "iconPath": "../../../images/foot_3.png",
          "selectedIconPath": "../../../images/foot_3.png"
        },
        {
          "pagePath": "pages/tabBarPackages/teamList/teamList",
          "text": "小组",
          "iconPath": "../../../images/foot_4.png",
          "selectedIconPath": "../../../images/foot_4.png"
        },
        {
          "pagePath": "pages/tabBarPackages/personal/personal",
          "text": "我的",
          "iconPath": "../../../images/foot_5.png",
          "selectedIconPath": "../../../images/foot_5.png"
        }
      ]
    }
  },
  created () {
  },
  methods: {
    switchTab(pagePath, index){
      this.selected = index
      Taro.switchTab({
          url: '../../../' + pagePath
      })
    }
  },
}
</script>

customTabBar.scss(这段css样式完全copy的这篇文章https://www.jianshu.com/p/ba33d0be8f03/)

.bottom-tab {
  position: fixed;
  display: flex;
  width: 100%;
  height: 49PX;
  background: white;
  box-shadow: 0PX -5PX 10PX 0PX rgba(0, 0, 0, 0.03);
  bottom: 0;
  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-img {
      margin: 5PX auto 0;
      width: 24PX;
      height: 24PX;
    }
    &-text {
      height: 14PX;
      line-height: 14PX;
      font-size: 10PX;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: rgba(68, 68, 68, 1);
    }
  }
}

3、tab页面调用组件

例：home页面

home.config.ts

export default {
  navigationBarTitleText: '用户管理平台',
  "usingComponents": {
    'customTabBar': '../../../components/custom-tab-bar/customTabBar'
  },
}

home.vue

<template>
    ......
    <customTabBar></customTabBar>
</template>
<script>
import "./home.scss";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { AtGrid, AtButton, AtNoticebar, AtIcon, AtToast } from "taro-ui-vue3";
import commonUtil from "../../../utils/util.ts";
import customTabBar from "../../../components/custom-tab-bar/customTabBar.vue";
 
export default {
    components: {
        AtGrid,
        AtButton,
        AtNoticebar,
        AtIcon,
        AtToast,
        customTabBar
    },
    data() {
        ......
};
</script>