uniapp顶部状态栏自定义设置

步骤：

第一步：现在pages.json文件夹中设置：
“navigationStyle”: “custom” （取消默认的原生导航栏）如需其它设置 uniapp

代码：

（样式设置这里相当于全局设置）

（或者可以根据业务需求设置单页面自定义导航栏）

第二步：将顶部状态栏自定义设置封装成组件提高组件复用性
代码块：

<template>
	<view class="_navbar" :style="{ height:`${trStyle.height + trStyle.top + bottomEx}px`}">
		<view class="_navbar_container" :style="{ height:`${trStyle.height}px`,top:`${trStyle.top}px` }">
			<view  class="_navbar_back" @click="uni.navigateBack()">
				<i class="iconfont icon-arrow-left-bold" style="font-size:40rpx"></i>
				<view class="zuo"><image src="../../static/zuojiantou.png" mode="" class="img"></image></view>
			
			</view>
			<view :style="{ height:`${trStyle.height }px`,lineHeight:`${trStyle.height }px` }" class="_navbar_title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	export default{
			name:"Navbar",
		data(){
			return {
				trStyle:uni.getMenuButtonBoundingClientRect(),
				background :'transparent',
				bottomEx:10,
			}
		},
		mounted(){	
			uni.$on('pageScroll',top => {
				let parentRoute = this.$parent.$scope.route
				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				let currentRoute = page.route
				if(parentRoute === currentRoute){
					this.$nextTick(()=>{
						if(top === 0) this.background = 'transparent'
						else if(top > this.trStyle.height + this.trStyle.top + this.bottomEx) this.background = '#2D248B'
						else this.background = `rgba(#2D248B, ${ top/this.trStyle.height + this.trStyle.top + this.bottomEx })`
					})
				}
			})
		},
		beforeUnmount(){
			uni.$off('pageScroll')
		},
		props:{
			back:{
				type:Boolean,
				default:true,
			},
			title:{
				type:String,
				default:'某某职业技术学院'
			}
		},
	}
</script>

<style lang="scss">
	@import '~@/styles/variable.scss';
	@import '~@/styles/mixins.scss';
	._navbar{
		width:750rpx;
		position:fixed;
		z-index:10000;
		transition:all 0.2s linear;
		background: linear-gradient(90deg, #AF251A 0%, #FA582B 51%, #AF251A 100%);
		._navbar_container{
			width:750rpx;
			position:absolute;
			left:0;
			bottom:0;
			._navbar_back{
				width: 100rpx;
				.img{
					width: 38rpx;
					height: 38rpx;
				}
				@include flex();
				color:#000;
				height:100%;
				font-size:40rpx;
				//margin-left:20rpx;
				cursor:pointer;
			}
			._navbar_title{
				position:absolute;
				left:50%;
				top:0rpx;
				height:100%;
				transform:translateX(-50%);
				font-size:30rpx;
				font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
				font-weight: normal;
				color:#FFF;
			}
		}
		
	}
</style>

第三步：将组件引入页面：

第四步：在页面data中设置：

根据以上步骤设置不会出现报错问题（本人在实际项目开发中使用）
此组件适配各种机型（包括iOS机型）