uniapp 导航栏和状态栏设置

1. 全局、局部导航栏和状态栏配置

参考官网:https://uniapp.dcloud.io/collocation/pages.html

{   // 局部
    "pages": [  
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white,默认值:white
                "navigationBarTitleText": "页面自定义标题", // 导航栏标题文字内容
                "navigationBarBackgroundColor": "#028939", // 导航栏背景颜色(同状态栏背景色),默认值:#F7F7F7  
                "backgroundColor": "#F8F8F8" // 下拉显示出来的窗口的背景色,默认值:#ffffff   
            }
        }
    ],
    // 全局配置
    "globalStyle": {
        "navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white,默认值:white 
        "navigationBarTitleText": "全局默认自定义标题", // 导航栏标题文字内容
        "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色(同状态栏背景色),默认值:#F7F7F7  
        "backgroundColor": "#F8F8F8" // 下拉显示出来的窗口的背景色,默认值:#ffffff   
    }
}

2. 手动设置局部导航栏

methods: {
    setTitleText() {
        uni.setNavigationBarTitle({
            title: "导航栏文字设置"
        })
    },
    setTitleBackground() {
        uni.setNavigationBarColor({
            frontColor: "#ffffff", // 导航栏文字设置
            backgroundColor: "#007AFF"// 导航栏背景色设置
        })
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容