如何实现一个自定义 tabBar？

推荐答案

在微信小程序中，自定义 tabBar 可以通过以下步骤实现：

1. 在 app.json 中配置 custom 字段： 在 app.json 文件中，将 tabBar 的 custom 字段设置为 true，表示使用自定义 tabBar。

   // www.javascriptcn.com code example
   {
     "tabBar": {
       "custom": true,
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志"
         }
       ]
     }
   }

2. 创建自定义 tabBar 组件： 在项目中创建一个自定义组件，例如 custom-tab-bar，并在其中实现 tabBar 的 UI 和交互逻辑。

   {
     "component": true,
     "usingComponents": {}
   }

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

   // www.javascriptcn.com code example
   .tab-bar {
     display: flex;
     justify-content: space-around;
     align-items: center;
     height: 50px;
     background-color: #fff;
     border-top: 1px solid #ddd;
   }
   
   .tab-bar-item {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .selected {
     color: #007aff;
   }

   // www.javascriptcn.com code example
   Component({
     data: {
       selected: 0,
       list: [
         {
           pagePath: "/pages/index/index",
           text: "首页",
           iconPath: "/images/home.png",
           selectedIconPath: "/images/home-active.png"
         },
         {
           pagePath: "/pages/logs/logs",
           text: "日志",
           iconPath: "/images/logs.png",
           selectedIconPath: "/images/logs-active.png"
         }
       ]
     },
     methods: {
       switchTab(e) {
         const path = e.currentTarget.dataset.path;
         wx.switchTab({ url: path });
         this.setData({
           selected: this.data.list.findIndex(item => item.pagePath === path)
         });
       }
     }
   });

3. 在页面中使用自定义 tabBar 组件： 在每个 tabBar 页面中引入并使用自定义 tabBar 组件。

   {
     "usingComponents": {
       "custom-tab-bar": "/components/custom-tab-bar/index"
     }
   }

   <custom-tab-bar />

本题详细解读

1. 配置 custom 字段

在 app.json 中配置 custom 字段为 true，表示启用自定义 tabBar。此时，微信小程序将不再使用默认的 tabBar，而是允许开发者自定义 tabBar 的样式和交互。

2. 创建自定义 tabBar 组件

自定义 tabBar 组件需要包含以下部分：

• UI 结构：使用 view、image、text 等组件构建 tabBar 的 UI。
• 样式：通过 wxss 文件定义 tabBar 的样式，包括布局、颜色、图标等。
• 交互逻辑：通过 javascript 文件实现 tabBar 的交互逻辑，例如切换 tab 时更新选中状态并跳转到对应页面。

3. 在页面中使用自定义 tabBar 组件

在每个 tabBar 页面中引入自定义 tabBar 组件，并确保组件的样式和交互逻辑与页面内容协调一致。

4. 注意事项

• 兼容性：自定义 tabBar 需要在小程序基础库版本 2.5.0 及以上支持。
• 性能优化：自定义 tabBar 可能会影响页面渲染性能，建议合理使用图片和动画，避免过度复杂的 UI 结构。
• 用户体验：自定义 tabBar 应遵循微信小程序的设计规范，确保用户能够直观地理解和使用 tabBar 功能。