在微信小程序中，tabBar 是底部的导航栏，通常用于展示页面间的切换。微信小程序提供了自定义 tabBar 的功能，让开发者可以自由设计样式和功能。

自定义 tabBar 主要通过以下步骤实现：

1. 配置 app.json

在小程序的根目录下的 app.json 文件中，定义 tabBar 属性。你可以通过设置 list 来定义 tab 项目，默认的 tabBar 是通过系统的 UI 进行展示的。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar-home.png",
        "selectedIconPath": "images/tabbar-home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/tabbar-logs.png",
        "selectedIconPath": "images/tabbar-logs-active.png"
      }
    ],
    "color": "#000000",
    "selectedColor": "#00BFFF",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black"
  }
}

2. 自定义 tabBar 样式

如果你想要自定义 tabBar 的外观和交互效果，可以通过隐藏系统的 tabBar 并自己实现自定义样式。

方案一：隐藏原生 tabBar，自己实现

  1. 在 app.json 中设置 "tabBar": null 来关闭默认的 tabBar。
  2. 使用一个自定义的 view 元素来实现 tabBar。
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": null
}

然后，在页面中通过一个自定义的 tabBar 进行布局：

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="content">
    <!-- 页面内容 -->
  </view>
  
  <!-- 自定义 tabBar -->
  <view class="custom-tabbar">
    <view class="tab-item" bindtap="onTabClick" data-index="0">
      <image class="icon" src="images/tabbar-home.png"></image>
      <text>首页</text>
    </view>
    <view class="tab-item" bindtap="onTabClick" data-index="1">
      <image class="icon" src="images/tabbar-logs.png"></image>
      <text>日志</text>
    </view>
  </view>
</view>
/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1;
}

.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
}

.tab-item {
  text-align: center;
}

.icon {
  width: 24px;
  height: 24px;
}

.selected {
  color: #00BFFF;
}
// pages/index/index.js
Page({
  data: {
    currentTab: 0
  },
  onTabClick(event) {
    const index = event.currentTarget.dataset.index;
    this.setData({ currentTab: index });
    // 根据当前 tab 切换页面
    if (index === 0) {
      wx.switchTab({ url: '/pages/index/index' });
    } else {
      wx.switchTab({ url: '/pages/logs/logs' });
    }
  }
});

方案二：使用 tabBar 配合自定义页面切换

通过自定义页面切换的方式，你也可以实现类似原生 tabBar 的效果，但在视觉上会有更多定制化的空间。

3. 实现动态切换和高亮效果

通过控制数据（比如 currentTab），你可以实现点击 tab 时切换页面和高亮显示选中的 tab。

在上面的示例代码中，onTabClick 事件处理函数会根据点击的 tab 切换到相应页面，并通过 currentTab 来控制当前选中的 tab 的样式。

4. 完整示例

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": null
}
<!-- pages/index/index.wxml -->
<view class="container">
  <view class="content">
    <!-- 页面内容 -->
  </view>
  
  <!-- 自定义 tabBar -->
  <view class="custom-tabbar">
    <view class="tab-item" bindtap="onTabClick" data-index="0">
      <image class="icon" src="images/tabbar-home.png"></image>
      <text>首页</text>
    </view>
    <view class="tab-item" bindtap="onTabClick" data-index="1">
      <image class="icon" src="images/tabbar-logs.png"></image>
      <text>日志</text>
    </view>
  </view>
</view>
/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1;
}

.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
}

.tab-item {
  text-align: center;
}

.icon {
  width: 24px;
  height: 24px;
}

.selected {
  color: #00BFFF;
}
// pages/index/index.js
Page({
  data: {
    currentTab: 0
  },
  onTabClick(event) {
    const index = event.currentTarget.dataset.index;
    this.setData({ currentTab: index });
    // 根据当前 tab 切换页面
    if (index === 0) {
      wx.switchTab({ url: '/pages/index/index' });
    } else {
      wx.switchTab({ url: '/pages/logs/logs' });
    }
  }
});

总结

微信小程序允许你通过关闭系统的 tabBar 来完全自定义底部导航栏。你可以设计独特的视觉效果和交互逻辑，也能实现如页面切换、动态更新和高亮等功能。