uni-app项目页面底部导航栏、顶部导航

1.在项目的pages.json配置页面路由
uni-app项目页面底部导航栏、顶部导航_第1张图片
2.底部tab导航,同样在pages.json里面"tabBar"就是uni-app自带的底部导航
uni-app项目页面底部导航栏、顶部导航_第2张图片
呈现的效果是这样的,只要上面的路由配好就可以的点击跳转页面了
uni-app项目页面底部导航栏、顶部导航_第3张图片
3.如果想要顶部导航栏
同样在pages.json里面的“globalStyle”
uni-app项目页面底部导航栏、顶部导航_第4张图片
4.如果不想要原生顶部导航全局可以设置为
uni-app项目页面底部导航栏、顶部导航_第5张图片
5.如果只是想某一页取消顶部原生导航可以这样
uni-app项目页面底部导航栏、顶部导航_第6张图片
注意:取消原生顶部导航之后,页面会覆盖手机的系统通知栏,所以需要页面加入一个占位元素,给它uni-app的提供的css样式
uni-app项目页面底部导航栏、顶部导航_第7张图片
uni-app项目页面底部导航栏、顶部导航_第8张图片
这里我放在了全局的样式里面,这样就不需要每页都加css了

你可能感兴趣的:(uni-app,vue,html,app,css)