参考官网文档:pages.json 页面路由 - uni-app官网 (dcloud.io)
底部tab效果:
在pages.json文件中页面导航和tabbar的使用以及样式图标的配置:
参考官方文档注意项:
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->模板->顶部选项卡。
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
"style":{
"navigationBarTextStyle":"black",
"navigationBarTitleText":"xuexi配置",
"h5":{
"pullToRefresh":{
"color":"#007AFF"
}
}
}
},{
"path": "pages/index/index"
},
{"path":"pages/comtact/contact"}
],
"tabBar":{
"list":[
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/logo.png",
"selectedIconPath":"static/logo.png"
},
{
"text":"信息",
"pagePath":"pages/message/message",
"iconPath":"static/logo.png",
"selectedIconPath":"static/logo.png"
},
{
"text":"我的",
"pagePath":"pages/comtact/contact",
"iconPath":"static/logo.png",
"selectedIconPath":"static/logo.png"
}
]
}
基本属性自提:写在同级下:例如
"tabBar":{
"color":"#007AFF",
"list":