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')},

3.中间图标文件

4.效果图

vant 底部导航栏中间凸起相关推荐

底部导航栏的凸起效果
微信小程序开发教程.开发教学本视频为1-1号视频,做出了底部导航栏的凸起效果第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...
android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
仿闲鱼底部导航栏带有中间凸起图标刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图: 好的,下面开始上代码了: 一. 在main.dart文件中,定义APP的入口信 ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
Flutter 凸起效果底部导航栏一
大多app中都会带有底部导航栏,系统默认自带的导航条不够新颖.今天我们改造一下导航条,将中间的按钮起到凸起的效果,特别有的app,中间常用扫一扫功能. Flutter为我们提供了一个控件BottomN ...
闲鱼底部tab android,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
image 霸图镇楼仿闲鱼底部导航栏带有中间凸起图标需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图 image 好的,下面开始上代码了: 一. 在main.dart文件 ...
定制化你的ReactNative底部导航栏
前言接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件 createBottomTabNavigator createMat ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android 固定底部导航,如何设置android底部导航栏位置固定在android
请帮我设置底部导航栏位置固定在底部, ,因为我在输入editText字段时遇到问题,底部导航栏向上移动并覆盖其他领域如何设置android底部导航栏位置固定在android 代码: xmlns:and ...

vant 底部导航栏中间凸起

vant 底部导航栏中间凸起

vant 底部导航栏中间凸起相关推荐

最新文章

热门文章

vant 底部导航栏 中间凸起

vant 底部导航栏 中间凸起

vant 底部导航栏 中间凸起相关推荐

最新文章

热门文章

vant 底部导航栏中间凸起

vant 底部导航栏中间凸起

vant 底部导航栏中间凸起相关推荐