有时根据业务场景,开发小程序需要自定义菜单栏,以便更加灵活地设置 tabBar 样式,以满足更多个性化的场景此时需要修改app.json配置信息,tabbar的配置按平时的就行,自定义菜单栏的话需要设置custom为true

"tabBar": {
        "custom": true,
        "color": "#a5b5b5",
        "selectedColor": "#22cd5e",
        "borderStyle": "black" ,
        "list": [{
          "selectedIconPath": "images/tabBar/icon_index_check.png",
          "iconPath": "images/tabBar/icon_index.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        },{
          "selectedIconPath": "images/tabBar/icon_my_check.png",
          "iconPath": "images/tabBar/icon_my.png",
          "pagePath": "pages/lianPage/lianPage",
          "text": "我的"
        }
      ]
    },
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

第二步需要在根目录下新建custom-tab-bar目录并创建对应的index文件,在此可以编辑自定义菜单的样式和内容,和正常编写组件的方式一样,完成后小程序就可以用自定义组件的样式显示菜单栏啦