【uni-app】创建底部或者顶部导航栏

目录

1、创建底部导航栏

2、自定义顶部导航栏组件

第一个图的代码 

第二个图的代码

1、创建底部导航栏

（1）新建导航页面

在 pages 中新建tabBar目录，在目录下创建choose和me目录。然后在pages.json的pages中，生成新页面的默认配置代码。（不一定非要创建在一个目录下，可以独立成一个文件）

（2）配置底部导航栏结构

在 pages.json 中，配置 tabBar 注意：pages 的第一个 path 必须与 tabBar 的第一个 pagePath 相同否则不显示底部导航

"pages": [{"path": "pages/tabBar/choose/index","style": {"navigationBarTitleText": "行情","navigationStyle": "custom","navigationBarTextStyle": "white"}},{"path": "pages/tabBar/me/index","style": {"navigationBarTitleText": "量化平台","navigationStyle": "custom","navigationBarTextStyle": "white"}}],"tabBar": {"color": "#d4dbe3","selectedColor": "#000000","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tabBar/choose/index","iconPath": "static/hqicon2.png","selectedIconPath": "static/hqicon1.png","text": "自选"},{"pagePath": "pages/tabBar/me/index","iconPath": "static/gerenicon2.png","selectedIconPath": "static/gerenicon1.png","text": "我的"}]},

2、自定义顶部导航栏组件

第一个图的代码 

顶部添加的内容：VIP图标、标题、背景图片

（1）在components中创建nabbar组件

（2）在所需页面引用

第二个图的代码

（1）在components中创建navbar组件

（2）在页面使用

（3）修改pages.json

如果是全局设置，那就在globalStyle中设置

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","navigationStyle": "custom" //设置自定义导航栏}

如果是单页面则是在对应页面中使用

"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePullDownRefresh": false,"navigationStyle": "custom" //设置自定义导航栏}}]

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！