小程序 Tabbar 自定义教程：详细步骤与示例

小程序的 Tabbar 可以通过修改 app.json 文件来进行自定义。

首先在 app.json 文件中设置 tabBar 属性：

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tabbar/mine.png",
        "selectedIconPath": "images/tabbar/mine-active.png"
      }
    ]
  }
}

定义 Tabbar 的样式，可以在 app.wxss 中定义样式，如下所示：

/* tab样式 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  z-index: 99;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 24rpx;
  color: #999;
}
.tabbar-item img {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 6rpx;
}
.tabbar-item.active {
  color: #3cc51f;
}
.tabbar-item.active img {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 6rpx;
}

在各个页面的 js 文件中，可以通过 wx.setNavigationBarColor() 方法来设置 Tabbar 的样式，如下所示：

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#3cc51f',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

以上就是小程序 Tabbar 的自定义方法。