uniapp 底部appbar的实现

12 min read

uniapp 底部appbar的实现

配置文件夹 pages.json

"tabBar" : {
        "color" : "#bfbfbf",
        "selectedColor" : "#515151",
        "borderStyle" : "black",
        "backgroundColor" : "#ffffff",
        "list" : [
            {
                "pagePath" : "pages/index/index",
                "text" : "首页",
                "iconPath" : "static/tabBarIco/index.png",
                "selectedIconPath" : "static/tabBarIco/index_sel.png"
            },
            {
                "pagePath" : "pages/search/search",
                "text" : "搜索",
                "iconPath" : "static/tabBarIco/search.png",
                "selectedIconPath" : "static/tabBarIco/search_sel.png"
            },
            {
                "pagePath" : "pages/me/me",
                "text" : "我的",
                "iconPath" : "static/tabBarIco/me.png",
                "selectedIconPath" : "static/tabBarIco/me_sel.png"
            }
        ]
    }

  • pagePath 组件路径

  • text 显示内容

  • iconPath 未选中图标

  • selectedIconPath 选中图标