默认底部导航无法完成 使用自定义tabBar(底部导航)
1、首先 app.json文件 找到 tabBar 添加 "custom": true 开启自定义tabBar
![](https://img8.php1.cn/3cdc5/15579/696/5cf9adb0f066b285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTAwNzA0MA==,size_16,color_FFFFFF,t_70)
2、根目录下新建custom-tab-bar目录 新建index(Component组件)**必须是index命名
![](https://img8.php1.cn/3cdc5/15579/696/4d28bdb027276ac5.png)
3.根据自己的需求实现tabBar的具体样式 这边推荐使用 cover 系列标签 (特点 可覆盖在原生组件之上)
![](https://img8.php1.cn/3cdc5/15579/696/70463fc0a54c1a7a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTAwNzA0MA==,size_16,color_FFFFFF,t_70)
4.跳转定义好的switchtab 页面
![](https://img.php1.cn/3cd4a/1eebe/cd5/3e641eb5f5c8cd90.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTAwNzA0MA==,size_16,color_FFFFFF,t_70)
5.这样就可以实现跳转了 但是会出现 跳转后选中的初始化 故要在switch页面加上 以下代码 设置当前选中的值 防止选中的值重置
![](https://img8.php1.cn/3cdc5/15579/696/98f8ead5ffa46744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTAwNzA0MA==,size_16,color_FFFFFF,t_70)