微信小程序自定义菜单栏

原创

mb6691d36b745ec 2024-07-24 15:35:05 ©著作权

文章标签 菜单栏自定义微信小程序 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mb6691d36b745ec的原创作品，请联系作者获取转载授权，否则将追究法律责任

有时根据业务场景，开发小程序需要自定义菜单栏，以便更加灵活地设置 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": "我的"
        }
      ]
    },

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