Vant 底部导航组件的实现 tabbar

最新推荐文章于 2023-05-12 13:15:47 发布

原创最新推荐文章于 2023-05-12 13:15:47 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#Vant #Vue #tabbar #van-tabbar #vant 导航选项卡

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

Vant

8 篇文章

订阅专栏

本文探讨了如何利用Vant框架创建底部导航组件tabbar，涉及路由跳转的实现、选项卡的工作原理以及路由拦截等关键点。

设计底部导航的功能组件

1. 路由跳转

2. 选项卡的原理

3. 路由拦截

<template>
  <van-tabbar v-model="active" active-color="#30A3F8">
    <van-tabbar-item 
      v-for="(item,index) in tabbars" 
      :key="index" 
      :to="(item.name)"
    >
      <span>{{item.title}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          normal: require("@/assets/images/shop/icon1_1.png"),
          active: require("@/assets/images/shop/icon1_2.png")
        },
        {
          name: "sort",
          title: "分类",
          normal: require("@/assets/images/shop/icon2_1.png"),
          active: require("@/assets/images/shop/icon2_2.png")
        },
        {
          name: "cart",
          title: "购物车",
          normal: require("@/assets/images/shop/icon3_1.png"),
          active: require("@/assets/images/shop/icon3_2.png")
        },
        {
          name: "mine",
          title: "我的",
          normal: require("@/assets/images/shop/icon4_1.png"),
          active: require("@/assets/images/shop/icon4_2.png")
        }
      ]
    };
  },
  watch: {
    '$route'(to, from) {
      if (to.path == "/shop/home") {
          this.active = 0;
      } else if (to.path == "/shop/sort") {
          this.active = 1;
      } else if (to.path == "/shop/cart") {
          this.active = 2;
      } else if (to.path == "/shop/mine" || to.path == "/shop/myorder" || to.path == "/shop/myorderreturn") {
          this.active = 3;
      }
    }
  },
  created () {
    // console.log(this.$route);
    // if (this.$route.name == "首页") {
    //     this.active = 0;
    // } else if (this.$route.name == "分类") {
    //     this.active = 1;
    // } else if (this.$route.name == "购物车") {
    //     this.active = 2;
    // } else if (this.$route.name == "我的主页" || this.$route.name == "我的订单" || this.$route.name == "退款/售后") {
    //     this.active = 3;
    // }
  },
};
</script>

<style lang="less" scoped>
.van-tabbar {
  border-top: 1px solid #EEE;
  height: 55px;
  .van-tabbar-item__icon img {
    width: 22px;
    height: 22px;
  }
}

.active_tab img {
  width: 22px;
  height: 22px;
}
</style>