UNI-APP_uni-ap自动获取状态栏高度，自定义导航栏组件

一时失言乱红尘 2022-12-28 07:17 195阅读 0赞

## uni-ap自动获取状态栏高度属性 ##

uni.getSystemInfoSync().statusBarHeight

![在这里插入图片描述][20201215134114667.png]

组件定义：

使用：

import Header from '@/components/header/index.vue';
    export default { 
    	components: { 
    		Header
    	},
    }

## 自定义导航样式二 ##

![在这里插入图片描述][20201226164335416.png]

<template>
    	<view>
    
    		<view class="mp-header">
    			<view class="sys-head" :style="{ height: statusBarHeight }"></view>
    			<view class="serch-box" style="height: 43px;">
    				<view class="serch-wrapper flex">
    					<view class="logo">
    						<image @tap="onreturn" class="logo_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAzCAYAAACE92h3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNq82EsKwjAQBuD2mrrTrTdw4cKFINKmrSVK9QZexpsIrnQTp6IgtZk0zfwZmFDQ8DFlaB6pMSYBx4JyRnmjXCctCMzSdAKJVaYnUFhhLBHlNf6EjlYZxfndoDExSVANwaRArrJT9//Iypq+OajKGtu8aJWFgFxlR9f8qJgvWIZiPiBX2cHnLYVi2rcHQrpRj+lw7sdcGuNADqtDvk5RsT4QinVBrkH2Uuvm90EzWCW5K2iHiQV6Uu6k9zztcLGAV8Qmqx3mFvBBuUWAyefja4sCAbq6tECALlQhQNfqoBCgC80RIKzSkMU3R4DilUrsaRQCtJ5ofVGRY7QPKnZ2H9pIiGN1hgBdlWYIcFSlsPsYGyq1ztVDUcnVfBAqvWdxooibKA7doO7a6ph3bSyKvi/929GnEW6El5RTyjvl6iXAACUHYeTCFiIMAAAAAElFTkSuQmCC"></image>
    						<text class="logo_title">我的客户</text>
    						<image src="data:image/png;base64,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" class="customer_add" mode=""></image>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="mp-header_">
    			<view :style="{ height: statusBarHeight }"></view>
    			<view class="serch-box" style="height: 43px;">
    			</view>
    		</view>
    		
    	</view>
    </template>
    
    <script> var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'; export default { data() { return { statusBarHeight:statusBarHeight, } }, methods: { //返回 onreturn(){ uni.navigateBack() } } } </script>
    
    <style lang="scss" scoped> .customer_add{ width: 40rpx; height: 48rpx; position: fixed; right: 48rpx; } .mp-header_ { background-size: 100% 100%; background-repeat: no-repeat; width: 100%; background: red; background: #2C7FFB; .serch-box{ width: 100%; height: 120rpx; background: #2C7FFB; background-size: 100% 100%; padding-left: 20rpx; } } .mp-header { background-size: 100% 100%; background-repeat: no-repeat; z-index: 999; position: fixed; left: 0; top: 0; width: 100%; background: red; background: #2C7FFB; .serch-box{ width: 100%; height: 120rpx; background: #2C7FFB; background-size: 100% 100%; padding-left: 20rpx; } .serch-wrapper { height: 100%; display: flex; align-items: center; justify-content: center; // margin-top: 20rpx; line-height: 86rpx; .logo{ font-size: 33rpx; margin-right: 31rpx; color: #fff; display: flex; align-items: center; .logo_title{ } } .logo_img { width: 18rpx; height: 33rpx; position: fixed; left: 15rpx; } } } </style>

## 自定义导航样式三 ##

![在这里插入图片描述][4cd7b49bef854f50a197e58a606fb5f0.png]

<template>
    	<view>
    		
    		<view class="header" :style="'height:'+(statusBarHeight+44)+'px;padding-top:'+statusBarHeight+'px'">
    			<view class="header_left" @click="onreturn">
    				<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABDpJREFUeNrsm1lIlFEUx++YVrZYYWaFVBJEERFoUi9Fe5S2WFFJYFQWbbZYBFHQRgsYbfQSQfQQGaUUoRRltJeZWdliPVRQvYQvQrTYNv0P8x8aP+/44nyL1znwA5n7MN/5z7nnnnO+q8/v96u2bDGqjVtUgKgA3rYh4DioB5KsvoHrkfyCWA87PwxsArNBF34WD9LaggDpYB2d72xZizNdgBFgbRjnFbeDsQIMBwVgJuikWX8NzpsqwCCwhc531Ky/AQdAkYkC9Ad5YFoY5+WX3w1KQINpAojzy8ES0FWz/gpsB2WRdt4LAqTS+VyQqFmvAXvARfDbjgdwU4ABYCWdT9asV4NCcM7Oh4h18ZdfDRaBnpr1KnAQnLX7QdwQYCCdXwy6W9b8dH4/uOTEwzgtwGCwgr+8zvlKZvtyu/a8mwIM5Z6fr3Fe7C3YB66AP049lFMCSFe3hs730Kx/AIcY9o6OqJwQoB/IBzmgm2b9IzgCTjjtvBMC9AVLwbxmnN9P53+5cRzZKYAcbwu57xPDhP0unvOuOG+nAL14zEnGT9Ksv6PzxeCrm6WoHQIkM+zzWO3pGhup8E47me2dEqA3mxoJ+5QwjY1k+5Ne6cEjKUAfOp8fprav5Tl/xksTmEgJkMKwX8X9r3NeWtpS8Nc0AaSfX8ZfX+f8e7CDRU6D8pi1VIAMFRhe5nILWO0z93yJFxKeHQLI9Hay5pf/zqOuiAnPk85HQoDpzVR4MsA8pTxuMTYJKMVNvWoF1lIBasOEdyqPwwWmC1DI7P7T8rn0++OZI6YAn6k5QBqZT4yCLNV0pj8SbAZfwH0TBVB07CcLnBkWESTCRoMNFKnKaydCpCrBx2AvBxoiQnzIWhw/EzsM7pkogDj+TAVeYsgwc5Zq/Ga3Pcjk94kgN01shsSe8/z/oxpfbFCMiqncFrJdbpsogNhTFZjx/aUICSFrHUJEELvrdnNk1x2havYAxSyLlSUniAjyKnyMivCND68IIFbDSCjVdIHtwCSKMFa5eFnL7qmwiCBT3yQ6ahVhHIskSZJlpkVA6HaQecANzVocK0a5EDXRxAgI2i1Gwm866tNEghRTdTxOjRNA7Kr6P/8fT8dDn0O2iIzUjoKXJgoQjIQfLJwmWESQwimXfx9jTWFEDgg1OfMrwDZwTTV9BS59RA57hzQTBQiWzY/ATnBZ0xzJRak5YL0TIrh5WbqimXlCAkUosFsEt2+J3QmJgEzWA0HrRBHkxJD7Qk/sKJu9cF3+gQq8MSpXTe8HSE6YqwK3xjPseF4vCBC8GCXzhBeadYkKuT67EYyynBxGCBAUQQYlW1k5Wk1a6SzmhOxIfrHPg/81ls0mKUOzJjXEQ01f0eojINQusGyu1KxJTkg3cQvoRNjO3ODXdJHGC+DnqSAjdes4vc70HGDcPCAqQFSAqABRATxr/wQYAB/e1gA919zmAAAAAElFTkSuQmCC" mode=""></image>
    			</view>
    			<view class="header_title">{
       {title}}</view>
    			<navigator url="/pages/users/withd/bill" hover-class="none">
    				<view class="header_right">账单</view>
    			</navigator>
    		</view>
    		<view :style="'height:'+(statusBarHeight+44)+'px'"></view>
    		
    	</view>
    </template>
    
    <script> var statusBarHeight = uni.getSystemInfoSync().statusBarHeight; export default { props:{ title:{ type:String, default:"默认标题" } }, data() { return { statusBarHeight:statusBarHeight } }, mounted() { }, created() { }, methods:{ onreturn(){ uni.navigateBack() }, } } </script>
    
    <style lang='scss' scoped> view{ box-sizing: border-box; } .header{ width: 750rpx; height: 88rpx; background: #FC312B; display: flex; align-items: center; justify-content: space-between; color: #FEFEFE; font-size: 33rpx; padding: 0 25rpx; position: fixed; top: 0; left: 0; z-index: 100; .header_left{ image{ width: 38rpx; height: 38rpx; position: relative; left: -8rpx; } } .header_title{ width: 300rpx; text-align: center; position: fixed; right: 0; left: 0; margin: 0 auto; font-size: 36rpx; } .header_right{ width: 100rpx; font-size: 29rpx; text-align: right; } .header_fx{ width: 35rpx; height: 35rpx; } } </style>

[20201215134114667.png]: /images/20221120/d18d2f3215a2449da4da448e44060bb2.png
[20201226164335416.png]: /images/20221120/76b72b00d67f401fa03eac61c13f35cd.png
[4cd7b49bef854f50a197e58a606fb5f0.png]: https://img-blog.csdnimg.cn/4cd7b49bef854f50a197e58a606fb5f0.png