vant 底部导航组件的实现（tabbar）

最新推荐文章于 2025-10-10 13:20:44 发布

转载最新推荐文章于 2025-10-10 13:20:44 发布 · 1.8w 阅读

vue.js 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的Tabbar组件代码示例，详细展示了如何通过Vanilla UI库创建响应式底部导航栏，包括图标状态切换和路由跳转等功能。

<template>
  <van-tabbar v-model="active" class="active_tab">
    <van-tabbar-item
      v-for="(item,index) in tabbars"
      :key="index"
      @click="tab(index,item.name)"
    >
      <span :class="currIndex == index ? active:''">{{item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img :src="props.active ? item.active : item.normal">
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          normal: require("../common/icon/home.png"),
          active: require("../common/icon/home_ac.png")
        },
        {
          name: "category",
          title: "分类",
          normal: require("../common/icon/category.png"),
          active: require("../common/icon/category_ac.png")
        },
        {
          name: "message",
          title: "消息",
          normal: require("../common/icon/message.png"),
          active: require("../common/icon/message.png")
        },
        {
          name: "cart",
          title: "购物车",
          normal: require("../common/icon/cart.png"),
          active: require("../common/icon/cart_ac.png")
        },
        {
          name: "mine",
          title: "我的",
          normal: require("../common/icon/mine.png"),
          active: require("../common/icon/mine_ac.png")
        }
      ]
    };
  },
  methods: {
    tab(index, val) {
      this.currIndex = index;
      this.$router.push(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}

.van-tabbar-item--active {
  color: #e10f02;
}
</style>

转载自：https://www.cnblogs.com/Jasonpub/p/10592390.html