vant 底部导航栏中间凸起_vant2 tabbar中间按钮突出-CSDN博客

本文链接：https://blog.csdn.net/cmmboy1990/article/details/118751642

本文介绍了如何使用Vant UI库创建一个底部导航栏，并实现中间按钮凸起的效果。通过提供的代码示例，展示了tabBar组件的用法，包括动态设置图标、徽标和切换事件处理。同时，强调中间按钮的路由配置不应包含在主页面的子路由中，而应单独配置。最后，附带了实际操作后的效果图。

摘要由CSDN通过智能技术生成

vant 底部导航栏中间凸起

1.tabBar代码

<template>
  <div>
    <van-tabbar fixed route v-model="active" @change="handleChange">
      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :badge='item.badge' :key="index">
        <span :class="defaultActive === index ? active:''">{{ item.title }}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal" v-show="index !==1">
          <img :src="props.active ? item.active : item.normal" class="tui" v-show="index===1">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>


<style scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}

/* 自定义选中的颜色 */
.van-tabbar-item--active {
  color: #d81e06;
}


.tui {
  width: 50px;
  height: 50px;
  margin-top: -40px;
  z-index: 100000;
}

[class*=van-hairline]::after {
  border: none !important
}

</style>

2.中间按钮，路由配置，注意不要放在Main下面的Children中，单独配置路由；[根据具体需求配置]

{
        path: '/',
        component: () => import('@/views/index'),
        redirect: '/home',
        meta: {
            title: '首页',
            keepAlive: true
        },
        children: [
            {
                path: '/home',
                name: 'Home',
                component: () => import('@/views/home/index'),
                meta: {title: '首页', keepAlive: true}
            },
            {
                path: '/model',
                name: 'Model',
                component: () => import('@/views/model/index'),
                meta: {title: '模块', keepAlive: true}
            },
            {
                path: '/mine',
                name: 'Mine',
                component: () => import('@/views/mine/index'),
                meta: {title: '个人中心', keepAlive: true}
            }
        ]
    },
    {
        path: '/add',
        name: 'Add',
        meta: {title: '新增'},
        component: () => import('@/views/add/index')
    },