uniapp微信小程序自定义顶部导航栏颜色内容

1.在page.json中找到需要自定义的配置的页面添加：

“navigationStyle”:“custom” //添加自定义配置

{
	"path": "pages/shopownerStatistics/statistics",
	"style": {
		"navigationBarTitleText": "营收统计",
		"app-plus": {
			"titleNView": false
		},
	"navigationStyle":"custom"//添加自定义配置
	}
},

2.找到需要自定义配置的vue文件

<template>
    <view>
        <!-- 假设我需要状态栏到文字内容部分还有50px的距离 -->
        <view class="status_bar" :style="{height:height+50+'px'}">
            <text>list</text>
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>  

<script>
    export default{
        data(){
            return {
                height:null,//获取的状态栏高度
            }
        },
        onLoad(){
            var _this=this;
            // 获取手机状态栏高度
            uni.getSystemInfo({
                success:function(data){
                    // 将其赋值给this
                    _this.height=data.statusBarHeight;
                }
            })
        },
    }
</script>

<style lang="less" scoped>
    .status_bar {
        width: 100%;
        background: #007AFF;
        position: relative;
    }
    /* 调整状态栏标题的位置 */
    text{
        position: absolute;
        margin: auto;
        bottom:10px;
        left:0;
        right:0;
        text-align: center;
    }
</style>