Tabbar-底部导航

引入

import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

基本使用

• active-color="red" :激活的颜色

• inactive-color="blue":未激活的颜色

• badge="3"：右上角数字提示

<van-tabbar v-model="active" active-color="red" inactive-color="blue">
  <van-tabbar-item icon="home-o" badge="3">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

<script>
export default {
  name: "Vant-Tabbar",
  data() {
    return {
      active: 0,//设置选择的索引
    };
  },
};
</script>

设置导航路由

<van-tabbar route v-model="active" active-color="red" inactive-color="blue">
  <van-tabbar-item to="/home" icon="home-o" badge="3">标签</van-tabbar-item>
  <van-tabbar-item to="/login" icon="search">标签</van-tabbar-item>
  <van-tabbar-item to="/search" icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item to="/goods" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

设置各个导航宽度不同

 <van-tabbar v-model="active" active-color="red" inactive-color="blue">
    <van-tabbar-item icon="home-o" badge="3">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item>
      <div><button class="btn1">加入购物车</button></div>
    </van-tabbar-item>
    <van-tabbar-item>
      <div><button class="btn2">立即购买</button></div>
    </van-tabbar-item>
  </van-tabbar>

样式 

<style>
/* 自定义设置各个导航的宽度 */
/* 1.取消各个item的flex */
.van-tabbar-item {
  flex: none !important;
}
.van-tabbar-item:nth-child(1) {
  width: 15%; /* 设置第一个标签的宽度为80px */
}

.van-tabbar-item:nth-child(2) {
  width: 15%; /* 设置第二个标签的宽度为120px */
}

.van-tabbar-item:nth-child(3) {
  width: 35%; /* 设置第三个标签的宽度为100px */
}

.van-tabbar-item:nth-child(4) {
  width: 35%; /* 设置第四个标签的宽度为90px */
}
/* 设置按钮样式 */
.btn1 ,.btn2{
  display: inline-block;
  width: 120px;
  height: 30px;
  background-color: orange;
  border-radius: 15px;
  border: none;
}
</style>