[uni-app] - uni-app tabBar不显示问题

我会带着你远行 2023-02-25 10:04 32阅读 0赞

## 问题代码 ##

`pages.json`

"tabBar":{ 
    		"backgroundColor":"#FFFFFF",
    		"color":"#000000",
    		"selectedColor":"#4CD964",
    		"list":[
    			{ 
    				"pagePath":"/pages/main/main",
    				"text":"首页",
    				"iconPath":"static/logo.png",
    				"selectedIconPath":"static/logo.png"
    			},
    			{ 
    				"pagePath":"/pages/index/index",
    				"text":"生气",
    				"iconPath":"static/logo.png",
    				"selectedIconPath":"static/logo.png"
    			}
    		]
    	}

在之后在重写该部分代码调通后，通过对比发现`pagePath`若是和页面路径不匹配则会出错。项目没有配置路径，因此不能通过`/`来代表项目根路径。通过相对路径则可以成功显示。

> 部分路径正确也可以显示

## 正确写法 ##

"tabBar":{ 
    		"backgroundColor":"#FFFFFF",
    		"color":"#000000",
    		"selectedColor":"#4CD964",
    		"list":[
    			{ 
    				"pagePath":"./pages/main/main",
    				"text":"首页",
    				"iconPath":"static/logo.png",
    				"selectedIconPath":"static/logo.png"
    			},
    			{ 
    				"pagePath":"pages/index/index",
    				"text":"生气",
    				"iconPath":"static/logo.png",
    				"selectedIconPath":"static/logo.png"
    			}
    		]
    	}

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp 小程序textarea显示不正常问题

extarea这个原生组件的坑，placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。。。解决页面滚动...

￡神魔★判官ぃ/ 2024年04月19日 12:15/ 0 赞/ 182 阅读

相关猿创征文｜uniapp tabbar自定义风格，uniapp成长之路

文章目录 uniapp成长之路 1️⃣ tabBar详解 1.1 tabBar所有属性 1.2 list所有属性 2️⃣ 中间

超、凢脫俗/ 2023年09月28日 22:12/ 0 赞/ 112 阅读

相关 uniapp 小程序图标不显示

不要把icon写在text里面不然小程序显示不了， H5可以显示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

ゝ一世哀愁。/ 2022年11月01日 05:45/ 0 赞/ 652 阅读

相关 uniapp之tabBar/页面切换

1.uniapp目录结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

╰半夏微凉°/ 2021年09月13日 15:24/ 0 赞/ 5491 阅读

相关 uniapp中设置TabBar

效果图： ![20210306175717503.gif][] 结构目录： ![20210306175848772.png][] pages.json:

超、凢脫俗/ 2021年07月26日 00:34/ 0 赞/ 2415 阅读

相关 uniapp——配置基本的tabbar

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

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

相关 uniapp实战——完成底部tabbar的配置

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

怼烎@/ 2021年07月25日 16:52/ 0 赞/ 659 阅读

相关 uniapp——tabbar的其他属性配置

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

àì夳堔傛蜴生んèń/ 2021年07月25日 15:51/ 0 赞/ 626 阅读

相关 uniapp-tabBar中间凸起按钮

前言：以下是使用的是原生方法，兼容会比绘制按钮的好，不用写更多代码去让图标固定到tabBar位置。官网有提到“中间按钮仅在 list 项为偶数时有效”，这需要注意，另外在中间

秒速五厘米/ 2021年07月25日 00:51/ 0 赞/ 1496 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 911 阅读