解决如何使用微信小程序使用自定义底部导航栏

最新推荐文章于 2026-05-19 09:30:31 发布

原创

最新推荐文章于 2026-05-19 09:30:31 发布 · 3.6k 阅读

标签

#微信小程序 #小程序

收录于

前两天接手微信小程序时，领导让把原有小程序的底部导航栏大换样，改成自定义形式。查阅文档后发现可以以下步骤更加清晰明了：

1.首先在app.json里配置"tabBar"属性为公共属性"custom": true，其他可以不变。

"tabBar": {
    "custom": true,
    "color": "#84899E",
    "selectedColor": "#000000",
    "borderStyle": "white",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/images/navBarImg/home.png",
        "selectedIconPath": "/images/navBarImg/home_active.png"
      },
      {
        "text": "商城",
        "pagePath": "pages/mall/mall",
        "iconPath": "/images/navBarImg/shop.png",
        "selectedIconPath": "/images/navBarImg/shop_active.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "/images/navBarImg/cart.png",
        "selectedIconPath": "/images/navBarImg/cart_active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mine/mine",
        "icon