【Uni-App】底部欄踩坑

 

一、Page.json一定要注冊這個頁面

Uni-App通過page.json找到，解析不到這個頁面文件是沒用的

二、配置tabBar屬性

    "tabBar":{
        "color":"#bfbfbf",//未選中時的自提顏色
        "selectedColor":"#515151", //選中時的
        "borderStyle":"black", //tabbar頂部邊框顏色  支持black/whit
        "backgroundColor" : "#FFFFFF",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首頁",// tabbar的按鈕文字
                "iconPath":"./static/logo.png",
                "selectedIconPath":"static/logo.png"
            },
            {
                "pagePath":"pages/tabBar/msgTip/msgTip",
                "text":"消息提醒",
                "iconPath":"./static/logo.png",
                "selectedIconPath":"static/logo.png"
            },
            {
                "pagePath":"pages/tabBar/myInfo/myInfo",
                "text":"我的",
                "iconPath":"./static/logo.png",
                "selectedIconPath":"static/logo.png"
            }
        
        ]
    }

被tabBar注冊的頁面，頁面下面都會有這個底部欄存在

 

三、跳轉到底部欄頁面只能使用switchTab的方式

1、使用組件navigate標簽要設置open-type=“switchTab”

2、使用method方法，用uni.switchTab()方法跳轉

 

四、預覽效果問題

由於更改的是page.json，熱部署會失效，一定要重編譯查看效果