uniapp配置tarBar

待我称王封你为后i 2024-03-31 09:08 97阅读 0赞

**简介**：本文讲解uniapp怎么配置tarBar，下方的状态栏。

## 第一步 ##

![在这里插入图片描述][9cc9af34804d4649aac816c84a6d4fb0.png]

## 第二步 ##

![在这里插入图片描述][ff13d2acd5644334b0944611228322f4.png]

**插入代码**：

"tabBar": {
        
    		"color":"#666", // 没有被选择的时候的颜色
    		"selectedColor":"#31C27C", // 被选中之后的颜色
    		"list":[
    			{
        
    				"text":"首页", // 文本信息
    				"pagePath":"pages/index/index", // 对应的路径
    				"iconPath":"static/images/home.png", // 图标信息
    				"selectedIconPath":"static/images/home-h.png" // 被选中之后的图标
    			},
    			{
        
    				"text":"个人", // 文本信息
    				"pagePath":"pages/user/user", // 对应的路径
    				"iconPath":"static/images/user.png", // 图标信息
    				"selectedIconPath":"static/images/user-h.png" // 被选中之后的图标
    			}
    		]
    	}

**运行结果**：  
![在这里插入图片描述][5713499ac1214fe4a0afab7b65a29d73.png]

[9cc9af34804d4649aac816c84a6d4fb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d1d300f7c3624ce382f3f2cc9c911064.png
[ff13d2acd5644334b0944611228322f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6f66f6623c714ebca03b4ef6ccc41b84.png
[5713499ac1214fe4a0afab7b65a29d73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/baf840e4667e4af5a8bc67234497429a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp配置全局样式

简介：本文讲解如何使用uniapp配置全局样式，和其中的优先级问题。 ![在这里插入图片描述][1a44d03c932b4c818d4a29c49da37680.png]

旧城等待，/ 2024年03月31日 09:08/ 0 赞/ 97 阅读

相关 uniapp配置tarBar

简介：本文讲解uniapp怎么配置tarBar，下方的状态栏。第一步 ![在这里插入图片描述][9cc9af34804d4649aac816c84a6d4fb0.pn

待我称王封你为后i/ 2024年03月31日 09:08/ 0 赞/ 98 阅读

相关 uniapp配置横屏启动

用uniapp开发横屏应用的时候，不想启动的时候是竖屏，启动完再设置成横屏，这样体验不好可以直接再page.json里面配置 page.json "pag

港控/mmm°/ 2022年10月16日 14:23/ 0 赞/ 396 阅读

相关 uniapp 图标配置

uniapp 图标配置，记录一下 1、在 HBuilderX 中打开 manifest.json 文件，找到 App图标配置 ![watermark_type_ZHJvaW

秒速五厘米/ 2022年09月10日 10:28/ 0 赞/ 702 阅读

相关 uniapp 路由的配置

============== page.json ============== { "pages": [ //pages数

ゝ一纸荒年。/ 2021年09月17日 13:56/ 0 赞/ 846 阅读

相关 uniapp——配置基本的tabbar

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淡淡的烟草味﹌/ 2021年07月25日 19:51/ 0 赞/ 535 阅读

相关 uniapp——globalStyle全局外观配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年07月25日 19:26/ 0 赞/ 546 阅读

相关 uniapp——condition启动模式配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年07月25日 16:53/ 0 赞/ 403 阅读

相关 uniapp 新建页面和页面配置

1、在pages目录中新建.vue文件 2、在pages.json中->pages数组内 { "path":"不加后缀的文件路径",

小灰灰/ 2021年07月24日 23:28/ 0 赞/ 798 阅读

相关自己封装移动端 tarbar标签切换带动画

![在这里插入图片描述][20200525230255462.gif] 这边设置了不能同时左右滑动和上下滑动 ![在这里插入图片描述][watermark_type_Zm

今天药忘吃喽~/ 2021年07月24日 22:20/ 0 赞/ 265 阅读