- 在app.json文件中添加N个tabBar
tabBar最少有两个
"tabBar": {
"list": [{
"pagePath": "pagePath",
"text": "text",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath"
},]
}
-
加入icon图标
tabBar中的图标不支持网络图片，需添加本地图片- 打开 iconfont网站 下载图标png下载
- 创建目录assets（素材）img文件夹，将icon图标放入并改为英文
-
将图标引入
回到app.json文件中，修改 pagePath（页面路径） , iconPath（未选中图标路径） , selectedIconPath（高亮图标路径）的值"tabBar": { "list": [{ "pagePath": "pages/home/index", "text": "主页", "iconPath": "assets/img/home.png", "selectedIconPath": "assets/img/home-1.png" },{ "pagePath": "pages/menu/index", "text": "菜单", "iconPath": "assets/img/menu.png", "selectedIconPath": "assets/img/menu-1.png" }] } 更改字体颜色
为tabBar添加 color 和 selectedColor 属性
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#1296db",
"list": [ {
"pagePath": "pages/home/index",
"text": "主页",
"iconPath": "assets/img/home.png",
"selectedIconPath": "assets/img/home-1.png"
}]
tabBar.png
