uniapp 自定义tabbar的样式

要在uniapp中自定义tabbar的样式，可以按照以下步骤进行操作：

1. 打开项目根路径下的App.vue文件
2. 在文件中增加以下代码：

   <style lang="scss">
   uni-tabbar {
     .uni-tabbar {
       // 设置tab背景
       background-image: linear-gradient(to top, #FAF8F8, #FFFFFF)!important;
       // 若需要使用背景图片，或者渐变色，背景色和背景图片最多选择一个进行设置

       .uni-tabbar-border {
         // 设置tabBar上边框的颜色
         background-color: #F7F4F4!important;
       }

       .uni-tabbar__bd {
         // 设置tabBar单项的样式

         .uni-tabbar__icon {
           // 设置图标大小
           width: 48upx!important;
           height: 48upx!important;
         }

         .uni-tabbar__label {
           // 设置文字大小
           font-size: 20upx!important;
         }
       }
     }
   }
   </style>

3. 保存文件后，即可自定义tabbar的样式。

这样，你就可以根据自己的需求，通过修改对应的样式来实现uniapp自定义tabbar的样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp自定义tabbar图标样式](https://download.csdn.net/download/weixin_45826772/86754568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [uniapp 修改tabBar图标大小和navigationBar字体大小(转载，仅作记录)](https://blog.csdn.net/Gabriel_wei/article/details/124919599)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [uniapp自定义tabbar](https://blog.csdn.net/TYD0313/article/details/127340852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]