大家好，关于uni前端很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于uni前端的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
一、基础知识
1.tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
常用参数如下所示，更多内容见官网tabBar说明：
属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色， 可选值 black/whiteApp 2.3.4+ 支持 其他颜色值listArray是tab 的列表，详见 list 属性说明， 最少2个、最多5个 tab
"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": "接口" }]}
将上一讲app02工程复制为app003,然后拖到HBuilder X中。
1.新建导航页面
右击pages
点击新建页面，选择默认模板
添加推荐页面、我的页面，完成后，页面如下
其中，navigationBarTitleText设置了主页标题。
2.配置底部导航
准备Tabar图标如下：
在pages.json文件中，增加Tabar配置如下：
"tabBar":{ "color":"#AAAAAA", "selectedColor":"#007AFF", "backgroundColor":"#FFFFFF", "borderStyle":"black", "list":[ { "pagePath":"pages/index/index", "text":"首页", "iconPath":"static/home.png", "selectedIconPath":"static/home_selected.png" }, { "pagePath":"pages/recommand/recommand", "text":"推荐", "iconPath":"static/recommand.png", "selectedIconPath":"static/recommand_selected.png" }, { "pagePath":"pages/my/my", "text":"我的", "iconPath":"static/my.png", "selectedIconPath":"static/my_selected.png" } ]}
点击运行--->运行到浏览器--->Chome
web端显示如下：
点击按钮，切换为我的页面
寄语：无限风光在险峰！
关于uni前端的内容到此结束，希望对大家有所帮助。
