微信小程序 - 自定义tabBar

最新推荐文章于 2025-05-07 08:56:47 发布

原创

最新推荐文章于 2025-05-07 08:56:47 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中实现自定义tabBar，以满足个性化需求。首先，需在app.json设置custom为true来禁用默认tabBar。接着，创建自定义tabBar组件并替换默认渲染。自定义组件可通过接口获取页面实例，并使用wx.switchTab进行页面切换。参考官方文档可进一步了解详情。

微信小程序默认的tabBar只能提供给开发者修改下颜色，然后就没了。

有的人想要最求个性化的tabBar，比如想要在tab中间加一个巨大的扫码按钮，这是很常见的。那么这时候，自定义tabBar就派上用场了。

做过小程序的应该都知道，定义默认样式的tabBar可以在app.json 的tabBar 属性中定义配置tabBar，如下：

{
    ...
    "tabBar": {
    "color": "#666666",
    "selectedColor": "#4d8970",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon2/home1.png",
        "selectedIconPath": "images/icon2/home2.png"
      },
      {
        "pagePath": "pages/classy/classy",
        "text": "分类",
        "iconPath": "images/icon2/classy1.png",
        "selectedIconPath": "images/icon2/classy2.png"
      }
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon2/mine1.png",
        "selectedIconPath": "images/icon2/mine2.png"
      }
    ]
  },
}