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


相关文章
|
5月前
|
搜索推荐
App Inventor 2 打造个性化酷炫的底部导航条
虽说 App Inventor 2 是简单的积木式开发手机 App,但是通过众多拓展它也能实现很多酷炫的功能,比如本文介绍的一款酷炫导航条,函数代码块用法超级简单,效果不错。当然还有更复杂更个性化的导航条后续再分享。
128 0
|
11月前
uni-app学习笔记-手动配置底部导航(二)
uni-app学习笔记-手动配置底部导航(二)
58 0
uni-app配置底部导航栏
uni-app配置底部导航栏
161 0
|
移动开发 前端开发 JavaScript
关于在Hbuilder中制作app底部导航栏的问题
关于在Hbuilder中制作app底部导航栏的问题
253 0
|
移动开发 前端开发 JavaScript
如何在Hbuilder中制作app底部导航栏
如何在Hbuilder中制作app底部导航栏
278 0
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
|
数据安全/隐私保护
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
124 0
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
|
6天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
10天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
10天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
下一篇
无影云桌面