uniapp实现自定义底部tab栏

1、自定义底部导航组件接收一个tabs数组作为参数，每个数组项包含icon和text字段，用于表示每个底部标签的图标和文本。通过遍历tabs数组，渲染每个底部标签项的图标和文本。activeIndex表示当前选中的底部标签的索引。点击底部标签时，调用switchTab方法切换底部导航，并通过$emit触发switchTab事件，将选中的标签索引传递给父组件。

  
     
     
     
     
   .custom-tab-bar {  
     display: flex;  
     justify-content: space-around;  
     align-items: center;  
     height: 50px;  
     background-color: #fff;  
   }  
     
   .custom-tab-bar .tab-bar-item {  
     display: flex;  
     flex-direction: column;  
     align-items: center;  
     font-size: 12px;  
   }  
     
   .custom-tab-bar .tab-bar-item.active {  
     color: #007aff;  
   }  
     
   .custom-tab-bar .tab-bar-icon {  
     width: 24px;  
     height: 24px;  
     margin-bottom: 4px;  
   }  
   

2、在需要显示自定义底部导航的页面中，引入和使用自定义底部导航组件。例如，在pages文件夹下的home页面中，可以添加以下代码: