uniapp配置tarBar

待我称王封你为后i 2024-03-31 09:08 112阅读 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 条评论，112人围观）

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

相关阅读

相关 uniapp如何配置使用uView

uniapp使用uView教程

女爷i/ 2024年04月20日 22:13/ 0 赞/ 83 阅读

相关 uniapp配置全局样式

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

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

相关 uniapp配置tarBar

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

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

相关 uniapp配置横屏启动

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

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

相关 uniapp 图标配置

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

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

相关 uniapp 路由的配置

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

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

相关 uniapp——配置基本的tabbar

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

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

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

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

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

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

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

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

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

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

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