底部效果如图:
pages文件夹新建4个页面
创建页面后自动在pages.json里有代码,如图
uniapp官网找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": "接口"
}]
}
在static目录下新建tabbar文件夹,把图标资源放在这里,我的是标注1为原始图标,2为选中后图标
在pages.json里对每个页面的图标进行配置地址
按照自己的喜好进行颜色改变,成功的代码如下:
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#559659",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/index1.png",
"selectedIconPath": "static/tabbar/index.2.png",
"text": "首页"
},
{
"pagePath": "pages/classify/classify",
"iconPath": "static/tabbar/classify1.png",
"selectedIconPath": "static/tabbar/classify2.png",
"text": "分类"
},
{
"pagePath": "pages/shop/shop",
"iconPath": "static/tabbar/shopping1.png",
"selectedIconPath": "static/tabbar/shopping2.png",
"text": "购物车"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/tabbar/mine1.png",
"selectedIconPath": "static/tabbar/mine2.png",
"text": "我的"
}
]
}
我的图标1是灰色,图标2是绿色,选中就会有一个变色的效果
运行,底部有导航页面即成功