小程序自定义 tabBar的三种方案

在微信小程序中，默认的 tabBar 组件不支持直接设置图片大小和文字大小。如果需要自定义 tabBar 的样式，可以考虑以下两种方案：

方案一：自定义 tabBar

自定义 tabBar 允许你完全控制 tabBar 的样式和行为。具体步骤如下：

1. 在项目根目录下创建 custom-tab-bar 文件夹

   创建文件夹结构如下：

   custom-tab-bar/
     ├── index.js
     ├── index.json
     ├── index.wxml
     └── index.wxss
   

2. 编写 custom-tab-bar/index.js

   Component({
     data: {
       selected: 0,
       list: [
         {
           pagePath: "/pages/index/index",
           text: "首页",
           iconPath: "/images/home.png",
           selectedIconPath: "/images/home-selected.png"
         },
         {
           pagePath: "/pages/logs/logs",
           text: "日志",
           iconPath: "/images/logs.png",
           selectedIconPath: "/images/logs-selected.png"
         }
       ]
     },
     attached() {},
     methods: {
       switchTab(e) {
         const data = e.currentTarget.dataset
         const url = data.path
         wx.switchTab({url})
         this.setData({
           selected: data.index
         })
       }
     }
   })
   

3. 编写 custom-tab-bar/index.json

   {
     "component": true
   }
   

4. 编写 custom-tab-bar/index.wxml

   <view class="tab-bar">
     <block wx:for="{{list}}" wx:key="index">
       <view class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
         <image class="tab-bar-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
         <text class="tab-bar-text" style="color: {{selected === index ? '#07c160' : '#000'}}">{{item.text}}</text>
       </view>
     </block>
   </view>
   

5. 编写 custom-tab-bar/index.wxss

   .tab-bar {
     display: flex;
     flex-direction: row;
     background-color: #fff;
     border-top: 1px solid #e5e5e5;
     height: 50px;
   }
   .tab-bar-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
   .tab-bar-icon {
     width: 24px;
     height: 24px;
   }
   .tab-bar-text {
     font-size: 12px;
   }
   

6. 在 app.json 中启用自定义 tabBar

   {
     "tabBar": {
       "custom": true,
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志"
         }
       ]
     }
   }
   

方案二：隐藏原生 tabBar 并自定义

如果不需要完全自定义，可以考虑隐藏原生 tabBar，然后在页面中自定义一个 tabBar。

1. 隐藏原生 tabBar

   在 app.json 中配置 tabBar，并将其隐藏：

   {
     "tabBar": {
       "color": "#000000",
       "selectedColor": "#07c160",
       "backgroundColor": "#ffffff",
       "borderStyle": "white",
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页",
           "iconPath": "images/home.png",
           "selectedIconPath": "images/home-selected.png"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志",
           "iconPath": "images/logs.png",
           "selectedIconPath": "images/logs-selected.png"
         }
       ]
     }
   }
   

2. 在每个页面中实现自定义 tabBar

   在页面的 wxml 中添加自定义 tabBar：

   <view class="page">
     <!-- 页面内容 -->
     <view class="custom-tab-bar">
       <view class="tab-bar-item" bindtap="switchTab" data-path="/pages/index/index">
         <image class="tab-bar-icon" src="/images/home.png"></image>
         <text class="tab-bar-text">首页</text>
       </view>
       <view class="tab-bar-item" bindtap="switchTab" data-path="/pages/logs/logs">
         <image class="tab-bar-icon" src="/images/logs.png"></image>
         <text class="tab-bar-text">日志</text>
       </view>
     </view>
   </view>
   

   在页面的 js 中实现 switchTab 方法：

   Page({
     switchTab(e) {
       const path = e.currentTarget.dataset.path;
       wx.switchTab({ url: path });
     }
   })
   

   在页面的 wxss 中添加样式：

   .custom-tab-bar {
     display: flex;
     flex-direction: row;
     position: fixed;
     bottom: 0;
     width: 100%;
     height: 50px;
     background-color: #fff;
     border-top: 1px solid #e5e5e5;
   }
   .tab-bar-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
   .tab-bar-icon {
     width: 24px;
     height: 24px;
   }
   .tab-bar-text {
     font-size: 12px;
   }
   

通过上述两种方案，可以实现自定义 tabBar 的图片和文字大小。选择适合自己项目的方案进行实现即可。