微信小程序如何使用自定义 tabBar？

推荐答案

在微信小程序中使用自定义 tabBar 的步骤如下：

1. 配置 app.json： 在 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": {}
   }

   // www.javascriptcn.com code example
   <!-- custom-tab-bar/index.wxml -->
   <view class="tab-bar">
     <view class="tab-item" bindtap="switchTab" data-path="pages/index/index">
       <image src="{{selected === 0 ? '/images/home-active.png' : '/images/home.png'}}"></image>
       <text class="{{selected === 0 ? 'active' : ''}}">首页</text>
     </view>
     <view class="tab-item" bindtap="switchTab" data-path="pages/logs/logs">
       <image src="{{selected === 1 ? '/images/logs-active.png' : '/images/logs.png'}}"></image>
       <text class="{{selected === 1 ? 'active' : ''}}">日志</text>
     </view>
   </view>

   // www.javascriptcn.com code example
   // custom-tab-bar/index.js
   Component({
     data: {
       selected: 0
     },
     methods: {
       switchTab(e) {
         const path = e.currentTarget.dataset.path;
         wx.switchTab({ url: `/${path}` });
         this.setData({
           selected: path === 'pages/index/index' ? 0 : 1
         });
       }
     }
   });

3. 在页面中使用自定义 tabBar： 在每个 tab 页面的 json 文件中，引入自定义 tabBar 组件。

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

   然后在页面的 wxml 文件中使用该组件。

   <!-- pages/index/index.wxml -->
   <view class="container">
     <!-- 页面内容 -->
   </view>
   <custom-tab-bar />

本题详细解读

1. 配置 app.json

在 app.json 中，通过设置 tabBar 的 custom 字段为 true，告诉微信小程序框架我们将使用自定义的 tabBar。list 字段仍然需要配置，用于定义 tabBar 的页面路径和文本。

2. 创建自定义 tabBar 组件

自定义 tabBar 组件需要实现 tabBar 的 UI 和交互逻辑。通过 switchTab 方法切换页面，并使用 setData 更新当前选中的 tab 状态。

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

在每个 tab 页面的 json 文件中引入自定义 tabBar 组件，并在 wxml 文件中使用该组件。这样，每个 tab 页面都会显示自定义的 tabBar。

通过以上步骤，你可以在微信小程序中实现自定义的 tabBar，满足个性化的需求。