微信小程序 底部菜单栏

### 微信小程序实现底部菜单栏

#### 自定义 tabBar 的配置方法

对于希望在微信小程序中创建更灵活和个性化底部导航的应用来说，自定义 `tabBar` 是一个理想的选择。官方提供的 `tabBar` 功能较为基础，因此许多开发者倾向于构建自己的版本以满足特定的需求。

#### 修改 app.json 文件

要启用自定义 `tabBar`，首先应在项目的根目录下的 `app.json` 中禁用默认的 `tabBar` 设置，并确保 `"usingComponents"` 字段被正确设置以便支持后续引入自定义组件[^1]：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": false,
  "usingComponents": {}
}

#### 创建自定义 tabBar 组件

接着，在项目结构内新建文件夹用于存放自定义 `tabBar` 相关资源（如图片、样式表），并编写对应的 WXML 和 WXSS 文件来描述界面布局与外观设计。下面展示了一个基本的例子，其中包含了两个选项卡以及相应的图标表示法[^2]：

<!-- custom-tab-bar.wxml -->
<view class="custom-tab-bar">
  <block wx:for="{{tabs}}" wx:key="pagePath">
    <navigator url="{{item.pagePath}}" data-index="{{index}}">
      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>

/* custom-tab-bar.wxss */
.custom-tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background-color: white;
}

.navigator {
  flex-grow: 1;
  text-align: center;
}

.image {
  margin-top: 16rpx;
  width: 48rpx;
  height: 48rpx;
}

.text {
  font-size: 24rpx;
  color: gray;
}

#### JavaScript 控制逻辑

最后一步是在 JS 文件里处理选中的状态变化和其他交互行为。这通常涉及到监听页面加载事件 (`onLoad`) 来初始化当前激活项；同时还需要响应用户的点击操作更新视图显示[^3]：

// custom-tab-bar.js
Component({
  properties: {},
  
  data: {
    tabs: [{
        pagePath: "/pages/home/home",
        iconPath: "./images/icon_home.png",
        selectedIconPath: "./images/icon_home_selected.png",
        text: '首页'
      }, {
        pagePath: "/pages/user/user",
        iconPath: "./images/icon_user.png",
        selectedIconPath: "./images/icon_user_selected.png",
        text: '我的'
      }],
    
    selectedIndex: 0, // 默认选中第一个标签页
  },

  methods: {
    switchTab(e) {
      const { index } = e.currentTarget.dataset;

      this.setData({ selectedIndex: index });
      
      // 更新路径或执行其他动作...
    }
  }
});

以上就是关于如何在一个标准的小程序框架下添加自定义 `tabBar` 的指导说明。通过这种方式不仅可以获得更大的定制空间，还能更好地适应不同业务场景的要求。