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