bug：注意list配置iconfont我们自定义的图标就会无法显示
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，
// 该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。
Tips
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
属性说明：
属性 类型 必填 默认值 描述 平台差异说明
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值 App 2.3.4+ 、H5 3.0.0+
blurEffect String 否 none iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明） App 2.4.0+ 支持(uni-app x 不支持)、H5 3.0.0+（只有最新版浏览器才支持）
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top top 值仅微信小程序支持
fontSize String 否 10px 文字默认大小 App 2.3.4+、H5 3.0.0+
iconWidth String 否 24px 图标默认宽度（高度等比例缩放） App 2.3.4+、H5 3.0.0+
spacing String 否 3px 图标和文字的间距 App 2.3.4+、H5 3.0.0+
height String 否 50px tabBar 默认高度 App 2.3.4+、H5 3.0.0+
midButton Object 否 中间按钮 仅在 list 项为偶数时有效 App 2.3.4+、H5 3.0.0+
iconfontSrc String 否 list设置 iconfont 属性时，需要指定字体文件路径 App 3.4.4+、H5 3.5.3+
backgroundImage String 否 设置背景图片,优先级高于 backgroundColor App
backgroundRepeat String 否 设置标题栏的背景图平铺方式，可取值："repeat" - 背景图片在垂直方向和水平方向平铺；"repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸；"repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸；"no-repeat" - 背景图片在垂直方向和水平方向都拉伸。 默认使用 "no-repeat" App
redDotColor String 否 tabbar上红点颜色 App
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
属性 类型 必填 说明 平台差异
pagePath String 是 页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath String 否 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
visible Boolean 否 该项是否显示，默认显示 App (3.2.10+)、H5 (3.2.10+)
iconfont Object 否 字体图标，优先级高于 iconPath App（3.4.4+）、H5 (3.5.3+)
midButton 属性说明
属性 类型 必填 默认值 描述
width String 否 80px 中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
height String 否 50px 中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
text String 否 中间按钮的文字
iconPath String 否 中间按钮的图片路径
iconWidth String 否 24px 图片宽度（高度等比例缩放）
backgroundImage String 否 中间按钮的背景图片路径
iconfont Object 否 字体图标，优先级高于 iconPath App（3.4.4+）
midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
iconfont参数说明：
属性 类型 说明
text String 字库 Unicode 码
selectedText String 选中后字库 Unicode 码
fontSize String 字体图标字号(px)
color String 字体图标颜色
selectedColor String 字体图标选中颜色
tabbar常见问题
tabbar 的 js api 见接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
tabbar 的 item 点击事件见页面生命周期的onTabItemTap。
代码跳转到 tabbar 页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type=“switchTab”
tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。开发者也可以自行设定高度，调回56px。详见
tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量–window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(–window-bottom) + 10px)
中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
如果是需要先登录、后进入tab页面，不需要把登录页设为首页，首页仍然是tabbar页，可参考云端一体登录模板
前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子
微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。详见
PC宽屏上，当页面存在topWindow或leftWindow或rightWindow等多窗体结构时，若想改变 tabbar 显示的位置，请使用 custom-tab-bar组件 配置，若想隐藏 tabbar，可以使用如下 css（好处是可以和 leftwindow 等窗体联动）：
.uni-app--showleftwindow + .uni-tabbar-bottom {
display: none;
}
代码示例
"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": "接口"
}]
}
自定义tabbar
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。
但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。文章来源：https://www.toymoban.com/news/detail-802748.html
H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义
普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面
微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。如果要使用，参考微信文档，项目根创建 custom-tab-bar 目录，注意里边的代码是 wxml,wxss，不是 vue，uni-app编译器会直接拷贝该目录到微信小程序中
原生的tabbar有且只有一个且在首页。二级页如需的tab，需自行编写view来实现。一般二级页面更适合的导航是 segement组件文章来源地址https://www.toymoban.com/news/detail-802748.html
到了这里，关于【unaipp】tabBar配置/tabBar图标无法显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
