首先在pages.json中找到"globalStyle",在它下面建立"tabBar"
如下:
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}
其中pagePath
是页面路径,iconPath
是页面图标路径,selectedIconPath
是页面选中后的图标路径,text
是页面名称,
示例:
"tabBar": {
"borderStyle": "black",
"selectedColor": "#FB7299",
"color": "#444444",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/首页.png",
/* "selectedIconPath": "static/tabbar/", */
"text": "主页"
},{
"pagePath": "pages/cate/cate",
"iconPath": "static/tabbar/收藏.png",
/*"selectedIconPath": "static/tabbar/", */
"text": "关注"
},{
"pagePath": "pages/mine/mine",
"iconPath": "static/tabbar/部群归属.png",
/*"selectedIconPath": "static/tabbar/", */
"text": "我的"
}
]
},
效果:
接下来就可以实现各个页面的功能了。