微信小程序 自定义tabbar高度

微信小程序自定义tabBar

微信小程序的tabBar是小程序底部的导航栏，可以放置最多5个tab，每个tab可以跳转到对应的页面，默认情况下，tabBar只有4个固定的tab：首页、分类、购物车和个人中心，有时候我们需要自定义tabBar，以满足特定的需求，本文将介绍如何在微信小程序中自定义tabBar。

自定义tabBar的基本思路

要自定义tabBar，我们需要完成以下步骤：

1、在app.json中配置tabBar属性，设置自定义tabBar的相关参数。

2、在app.wxss中编写自定义tabBar的样式。

3、在页面的js文件中，监听tabBar的相关事件，如点击、切换等。

自定义tabBar的具体实现

1、配置app.json

在app.json中，我们需要配置tabBar的属性，具体如下：

{
  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user",
    "pages/customTabBar/customTabBar"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#000",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homeactive.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/category.png",
        "selectedIconPath": "images/categoryactive.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/cart.png",
        "selectedIconPath": "images/cartactive.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/useractive.png"
      }
    ]
  }
}

在上述代码中，我们设置了tabBar的color、selectedColor、backgroundColor、borderStyle等属性，以及一个list数组，用于存放自定义的tab，每个tab包含pagePath、text、iconPath和selectedIconPath四个属性，pagePath表示页面路径，text表示tab的文字，iconPath表示未选中时的图标，selectedIconPath表示选中时的图标，注意，iconPath和selectedIconPath需要使用相对路径。

2、编写app.wxss样式

在app.wxss中，我们可以编写自定义tabBar的样式。

/* tabBar */
.customtabbar {
  display: flex;
  justifycontent: spacearound;
  alignitems: center;
  height: 50px;
  backgroundcolor: #fff;
  bordertop: 1px solid #ccc;
}
.customtabbar .item {
  display: flex;
  flexdirection: column;
  alignitems: center;
}
.customtabbar .item span {
  fontsize: 12px;
  color: #999;
}
.customtabbar .item i {
  width: 24px;
  height: 24px;
}
.customtabbar .item i.home { backgroundimage: url(../../images/home.png); }
.customtabbar .item i.homeactive { backgroundimage: url(../../images/homeactive.png); }
.customtabbar .item i.category { backgroundimage: url(../../images/category.png); }
.customtabbar .item i.categoryactive { backgroundimage: url(../../images/categoryactive.png); }
.customtabbar .item i.cart { backgroundimage: url(../../images/cart.png); }
.customtabbar .item i.cartactive { backgroundimage: url(../../images/cartactive.png); }
.customtabbar .item i.user { backgroundimage: url(../../images/user.png); }
.customtabbar .item i.useractive { backgroundimage: url(../../images/useractive.png); }

在上述代码中，我们为自定义的tabBar添加了一个名为customtabbar的class，并为其设置了样式，我们还为每个tab的图标设置了背景图片，注意，这里使用了相对路径，如果需要使用绝对路径，可以将url()中的路径替换为实际的图片路径。