1. 程式人生 > 實用技巧 >uni-app 配置了tabBar無法顯示的問題

uni-app 配置了tabBar無法顯示的問題

{
    "pages": [ //pages陣列中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "元件"
            }
        },
        {
            "path": "pages/index/index1",
            "style": {
                
"navigationBarTitleText": "介面" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "
#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff",
     //注意標紅出,不要手殘去新增成絕對路徑,下面這個就是錯誤的示範,無法顯示出tabBar
"list": [{ "pagePath": "./pages/index/index", "iconPath": "/static/1.png", "selectedIconPath": "/static/2.png
", "text": "元件" }, { "pagePath": "./pages/index/index1", "iconPath": "/static/3.png", "selectedIconPath": "/static/4.png", "text": "介面" }] } }

修改之後:

{
    "pages": [ //pages陣列中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "元件"
            }
        },
        {
            "path": "pages/index/index1",
            "style": {
                "navigationBarTitleText": "介面"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
     //要修改成與pages裡面path的路徑一樣,點選儲存就能正常顯示了
"list": [{ "pagePath": "pages/index/index", "iconPath": "/static/1.png", "selectedIconPath": "/static/2.png", "text": "元件" }, { "pagePath": "pages/index/index1", "iconPath": "/static/3.png", "selectedIconPath": "/static/4.png", "text": "介面" }] } }