简述
uniapp框架本身无需引用外部库，仅需配置自身的pages.json文件即可上方导航栏与下方TabBar，
结果
image.png
用法
pages.json文件配置相关图解
50d02fbfce819d42d8c694983f32c587.png
TabBar配置
- 配置之前必须先进行路由配置,否则TabBar配置无效
- 在tabBar项进行详细配置(下面简述一些重要的配置项)
list: tabBar列表, 将每个tabBar项放入其中
path: 相应路由
iconPath: tabBarItem中的图标,不填则没有,但是会占位置
selectedIconPath: 选中之后的图标,不填则没有,但是会占位置
导航栏配置
- 配置前,需要先拥有一个导航栏组件用于替换默认导航栏
组件示例
image.png
- 将组件使用在对应页面中
使用示例
image.png
-
在pages.json中进行配置
在对应的页面中替换掉默认的导航栏
image.png
注意
上图配置的导航栏仅对单个页面有效
image.png
如需全局配置
-
pages文件进行以下配置
image.png - 相应页面使用相应导航栏
