uniapp 導(dǎo)航欄和狀態(tài)欄設(shè)置

1. 全局、局部導(dǎo)航欄和狀態(tài)欄配置

參考官網(wǎng):https://uniapp.dcloud.io/collocation/pages.html

{   // 局部
    "pages": [  
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTextStyle": "white", // 導(dǎo)航欄標題顏色及狀態(tài)欄前景顏色,僅支持 black/white,默認值:white
                "navigationBarTitleText": "頁面自定義標題", // 導(dǎo)航欄標題文字內(nèi)容
                "navigationBarBackgroundColor": "#028939", // 導(dǎo)航欄背景顏色(同狀態(tài)欄背景色),默認值:#F7F7F7  
                "backgroundColor": "#F8F8F8" // 下拉顯示出來的窗口的背景色,默認值:#ffffff   
            }
        }
    ],
    // 全局配置
    "globalStyle": {
        "navigationBarTextStyle": "black", // 導(dǎo)航欄標題顏色及狀態(tài)欄前景顏色,僅支持 black/white,默認值:white 
        "navigationBarTitleText": "全局默認自定義標題", // 導(dǎo)航欄標題文字內(nèi)容
        "navigationBarBackgroundColor": "#F8F8F8", // 導(dǎo)航欄背景顏色(同狀態(tài)欄背景色),默認值:#F7F7F7  
        "backgroundColor": "#F8F8F8" // 下拉顯示出來的窗口的背景色,默認值:#ffffff   
    }
}

2. 手動設(shè)置局部導(dǎo)航欄

methods: {
    setTitleText() {
        uni.setNavigationBarTitle({
            title: "導(dǎo)航欄文字設(shè)置"
        })
    },
    setTitleBackground() {
        uni.setNavigationBarColor({
            frontColor: "#ffffff", // 導(dǎo)航欄文字設(shè)置
            backgroundColor: "#007AFF"http:// 導(dǎo)航欄背景色設(shè)置
        })
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容