[JavaScript知识库]vue tabbar组件

底部导航栏切换
直接上代码

使用props接受每个页面传递过来的tabKey
子组件内容

<template>
  <div class="tabbar">
    <div class="placegolder-container"></div>
    <div class="bottom-tabs">
      <div class="tabs-item" v-for="(item, index) in tabsList" :key="index" @click="tabsChange(index)">
        <img class="tab-icon" :src="tabKey==index?item.src:item.src1">
        <p class="tab-text" :class="tabKey==index?'active':''">{{item.text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  props: {
    tabKey: {
      type: [String, Number],
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      tabIndex: 0,
      tabsList: [
        {
          src: require("../../assets/tabbar/homes.png"),
          src1: require("../../assets/tabbar/home.png"),
          text: "首页",
          path: "/Home",
        },
        {
          src: require("../../assets/tabbar/equipments.png"),
          src1: require("../../assets/tabbar/equipment.png"),
          text: "设备",
          path: "/Equipment",
        },
        {
          src: require("../../assets/tabbar/shops.png"),
          src1: require("../../assets/tabbar/shop.png"),
          text: "商铺",
          path: "/Shop",
        },
        {
          src: require("../../assets/tabbar/mines.png"),
          src1: require("../../assets/tabbar/mine.png"),
          text: "个人",
          path: "/Mine",
        },
      ],
    };
  },
  created() {},
  methods: {
    tabsChange(index) {
      this.$router.push({
        path: this.tabsList[index].path,
      });
    },
  },
  watch: {},
};
</script>


<style scoped lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
}
.placegolder-container {
  height: 70px;
}

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -1px 1px #e6e6e6;
  background-color: #fff;

  .tabs-item {
    padding: 5px 0;
    flex: 1;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .tab-icon {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    .tab-text {
      font-size: 14px;
      margin: 0;
      color: #92a1a9;
      &.active {
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
}
</style>

父组件先注册该组件
然后在对应的页面中添加如下代码
例如以下是首页 将tabKey设置为0

 <Tabbar :tabKey="0" />

子组件中设备页为第二项
则添加以下代码

<Tabbar :tabKey="1" />

以此类推。tabbar组件即可 在需要的每个页面都引入该组件。定位到页面的最下方即可