g***@outlook.com
g***@outlook.com
  • 发布:2024-04-05 01:07
  • 更新:2024-10-17 15:26
  • 阅读:2932

底部导航栏tabBar设置后不显示的问题——已解决

分类:uni-app

先说结论:
pages.json里少了一项

"uniIdRouter": {}

我创建了一个空白vue3的uniapp项目,创建了4个页面,想做底部导航栏(tabBar),但是按照官方的文档配置之后却没有任何效果,参考CSDN、DCloud社区、ChatGPT等看到的解决方法如“pages和tabBar两者的第一个页面必须相同”、“pagePath驼峰命名”、“pagePath的路径”等等这些方法对我都没有效果(其他人或许错在这里,如果你的这几点没有配好的话,可以看看这篇问答

折腾了一小时多没结果,我试着创了一个空白vue2版本的项目,配置好之后,tabBar居然出来了,通过对比两个项目的pages.json,我发现vue3版本的默认比vue2版本的少了一项"uniIdRouter": {},回头一试果然是这样,就这,害我折腾了这么久

贴个代码,大家注意倒数第二行

{  
    "pages": [  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app"  
            }  
        },  
        {  
            "path" : "pages/test1/test1",  
            "style" :   
            {  
                "navigationBarTitleText" : "",  
                "enablePullDownRefresh" : false  
            }  
        }  
    ],  
    "tabBar": {  
        "color": "#7A7E83",  
        "selectedColor": "#3cc51f",  
        "borderStyle": "black",  
        "backgroundColor": "#ffffff",  
        "list": [{  
            "pagePath": "pages/index/index",  
            "iconPath": "static/logo.png",  
            "selectedIconPath": "static/logo.png",  
            "text": "index"  
        }, {  
            "pagePath": "pages/test1/test1",  
            "iconPath": "static/logo.png",  
            "selectedIconPath": "static/logo.png",  
            "text": "test1"  
        }]  
    },  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    },  
    "uniIdRouter": {}  
}
0 关注 分享

要回复文章请先登录注册

靐齉齾麤龖龗

靐齉齾麤龖龗

回复 p***@qq.com :
我vue3的没有这个也有底部导航栏,哈哈
2024-10-17 15:26
p***@qq.com

p***@qq.com

也有可能是没有重新运行0.0
2024-10-17 15:11