簡述
uniapp框架本身無需引用外部庫，僅需配置自身的pages.json文件即可上方導(dǎo)航欄與下方TabBar堕阔，
結(jié)果
image.png
用法
pages.json文件配置相關(guān)圖解
50d02fbfce819d42d8c694983f32c587.png
TabBar配置
- 配置之前必須先進(jìn)行路由配置,否則TabBar配置無效
- 在tabBar項進(jìn)行詳細(xì)配置(下面簡述一些重要的配置項)
list: tabBar列表, 將每個tabBar項放入其中
path: 相應(yīng)路由
iconPath: tabBarItem中的圖標(biāo),不填則沒有,但是會占位置
selectedIconPath: 選中之后的圖標(biāo),不填則沒有,但是會占位置
導(dǎo)航欄配置
- 配置前,需要先擁有一個導(dǎo)航欄組件用于替換默認(rèn)導(dǎo)航欄
組件示例
image.png
- 將組件使用在對應(yīng)頁面中
使用示例
image.png
-
在pages.json中進(jìn)行配置
在對應(yīng)的頁面中替換掉默認(rèn)的導(dǎo)航欄
image.png
注意
上圖配置的導(dǎo)航欄僅對單個頁面有效
image.png
如需全局配置
-
pages文件進(jìn)行以下配置
image.png - 相應(yīng)頁面使用相應(yīng)導(dǎo)航欄
