【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"    }]
  }
}


相关文章
|
9月前
|
搜索推荐
App Inventor 2 打造个性化酷炫的底部导航条
虽说 App Inventor 2 是简单的积木式开发手机 App,但是通过众多拓展它也能实现很多酷炫的功能,比如本文介绍的一款酷炫导航条,函数代码块用法超级简单,效果不错。当然还有更复杂更个性化的导航条后续再分享。
185 0
uni-app学习笔记-手动配置底部导航(二)
uni-app学习笔记-手动配置底部导航(二)
77 0
uni-app配置底部导航栏
uni-app配置底部导航栏
194 0
|
移动开发 前端开发 JavaScript
关于在Hbuilder中制作app底部导航栏的问题
关于在Hbuilder中制作app底部导航栏的问题
315 0
|
移动开发 前端开发 JavaScript
如何在Hbuilder中制作app底部导航栏
如何在Hbuilder中制作app底部导航栏
360 0
|
数据安全/隐私保护
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
156 0
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
208 0
|
10天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
25天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
22 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作