【uni-app】【01】底部导航栏与页面切换

简介: 【uni-app】【01】底部导航栏与页面切换

1.(配置文件在哪)uni-app 路由控制是在 pages.json文件中的。

2.(基本配置项有哪些)初学的时候主要有三个配置项,①pagesglobalStyletabbar

6ee2a4ced0b0dad980d60e778a4175b4_2571021-20230423030234292-997221939.png

[!TOC]

接下来主要是对这三个配置项做一个简单介绍。

65202ac6fea0d8e90435e71b37cf3425_2571021-20230423030147467-1986455798.png


pages

负责页面管理。不需要自己写的,你在项目的pages文件夹下创建页面会自动生成配置项。值得注意的是:如果你后期修改了页面文件的文件名,这里的配置不会自动更新,需要你手动来修改。

具体配置请见下图。

72ea65a31899dd5675f586a47faa4e50_2571021-20230423030614547-1623525524.png


上面配置所对应的文件:

62f55fc8ff8848b040f2411940e86372_2571021-20230423030732980-1418433554.png


globalStyle

这个是对顶部导航栏样式的设置

鼠标移动到对应配置项名称上面,会有中文提示告诉你那个配置项啥意思的。(默认当你是使用HbuiderX在进行开发)

bf0ca4cb723bc2e9f2dc7bac4b6a506e_2571021-20230423030932985-1897024859.png


tabBar

这个是对底部导航栏的设置,你可以参考下面配置

af29f8611f34f97fffa941e08afffdef_2571021-20230423031233928-1623909698.png

这个配置项的名称吧意思很明确,理解起来应该没啥大问题吧。


汇总

在此给出我写的以供参考

文件结构

9930a8cd847603b9c78daef42ad5d338_2571021-20230423031357311-1685879112.png


pages.json配置

{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "萌狼工作室"    }
    },
    {
"path" : "pages/index/work",
"style" :                                                                                    
            {
"navigationBarTitleText": "任务数据",
"enablePullDownRefresh": false            }  
        }
        ,{
"path" : "pages/index/home",
"style" :                                                                                    
            {
"navigationBarTitleText": "个人中心",
"enablePullDownRefresh": false            }
        }
    ],
"globalStyle": {
"navigationBarTextStyle": "black",// 导航栏标题颜色"navigationBarTitleText": "萌狼工作室",//导航栏标题文字内容"navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色"backgroundColor": "#F8F8F8",//背景颜色"app-plus": {
"background": "#efeff4"//窗体背景色    }
  },
"tabBar": {
"color":"var(--UI-BG)",
"selectedColor": "#285F44",
"borderStyle":"",
"list":[{
"pagePath": "pages/index/index",//要跳转的页面路径"text":"",//文本内容"iconPath": "static/icons/首页.svg",//默认图标"selectedIconPath": "static/icons/首页select.svg"//被选中的时候的图标    },
    {
"pagePath": "pages/index/work",
"text":"",
"iconPath": "static/icons/数据中心.svg",
"selectedIconPath": "static/icons/数据中心select.svg"    },
    {
"pagePath": "pages/index/home",
"text":"",
"iconPath": "static/icons/个人中心.svg",
"selectedIconPath": "static/icons/个人中心select.svg"    }]
  }
}


相关文章
|
7月前
|
搜索推荐
App Inventor 2 打造个性化酷炫的底部导航条
虽说 App Inventor 2 是简单的积木式开发手机 App,但是通过众多拓展它也能实现很多酷炫的功能,比如本文介绍的一款酷炫导航条,函数代码块用法超级简单,效果不错。当然还有更复杂更个性化的导航条后续再分享。
169 0
uni-app学习笔记-手动配置底部导航(二)
uni-app学习笔记-手动配置底部导航(二)
69 0
uni-app配置底部导航栏
uni-app配置底部导航栏
184 0
|
移动开发 前端开发 JavaScript
关于在Hbuilder中制作app底部导航栏的问题
关于在Hbuilder中制作app底部导航栏的问题
300 0
|
移动开发 前端开发 JavaScript
如何在Hbuilder中制作app底部导航栏
如何在Hbuilder中制作app底部导航栏
330 0
|
数据安全/隐私保护
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
138 0
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
695 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
750 1
|
1天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
30 11

热门文章

最新文章