uniapp 任务栏顶部导航适配

ゝ一世哀愁。 2021-09-18 06:12 581阅读 0赞

## uniapp 任务栏顶部导航适配 ##

### 一、问题说明： ###

*  1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏
 *  2、解决思路：
    
     *  利用uni.getSystemInfo() 获取手机设备的型号信息,获取手机状态栏的信息statusBarHeight，在给顶部导航设置高度时比例高度加上状态栏的高度
     *  比例高度x：750/100 = screenWidth / x  
        ![20201023151100273][]

### 二、代码示例： ###

*  下面代码直接是一个头部组件：可以直接使用

<template>
    	<view class="header-comp">
    		<image  mode="aspectFill" v-if="!nobg" class="bg" src="/static/eam/header-bg.png"/>
    		<view class="zw"></view>
    		<view class="header" v-if="!isOpacity">
    			<image  mode="scaleToFill" v-if="!nobg" class="header-bg" src="/static/eam/header-bg2.png"/>
    			<view class="status-bar" :style="{height:statusBarHeight+'px'}"></view>
    			<view class="header-bar">
    				<image v-if="!noback && !bg" class="back" src="/static/eam/back.png" @click="goBack"/>
    				<image v-if="!noback && bg" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
    				<view class="title">
    					{ { title}}
    				</view>
    				<view class="header-right">
    					<slot name="right"></slot>
    				</view>
    			</view>
    		</view>
    		<view class="header" v-if="isOpacity">
    			<image  mode="scaleToFill" :style="{opacity: opacity, height: statusBarHeight + headerBar + 'px'}" class="header-bg" src="/static/eam/header-bg2.png"/>
    			<view class="status-bar" :style="{height:statusBarHeight+'px'}"></view>
    			<view ref="headerBar" class="header-bar">
    				<image :style="{opacity: opacity}" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
    				<image :style="{opacity: 1-opacity}" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
    				<view class="title">
    					{ { title}}
    				</view>
    				<view class="header-right">
    					<slot name="right"></slot>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	import util from '@/utils/util.js'
    	export default { 
    		props:{ 
    			Number,
    			title: String,
    			bg: Boolean,
    			nobg: Boolean,
    			noback: Boolean,
    			back: Function,
    			isOpacity: { 
    				type: Boolean,
    				default: false
    			},
    			opacity: Number
    		},
    		data() { 
    			return { 
    				statusBarHeight: 44,
    				headerBar: 0
    			};
    		},
    		created(){ 
    			uni.getSystemInfo({     
    				success:(res)=> {     
    					this.statusBarHeight = res.statusBarHeight;   // 状态栏高度
    					this.headerBar = res.screenWidth / 750 * 100
    				}    
    			});   
    		},
    		methods:{ 
    			goBack(){ 
    				if(this.back){ 
    					this.back()
    				}else{ 
    					uni.navigateBack({ 
    						delta: 1
    					})
    				}
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    .header{ 
    	position: fixed;
    	top: 0;
    	width: 750rpx;
    	z-index: 99;
    }
    .header-comp{ 
    	position: relative;
    }
    .bg{ 
    	position: absolute;
    	// #ifndef APP-PLUS-NVUE
    	top: calc(-1 * (88rpx - var(--status-bar-height)));
    	// #endif
    	height: 276rpx;
    	width: 750rpx;
    }
    .zw{ 
    	// #ifndef APP-PLUS-NVUE
    	height: calc(100rpx + var(--status-bar-height));
    	// #endif
    }
    .header-bg{ 
    	position: absolute;
    	top: 0;
    	width: 750rpx;
    	background-color: #007AFF;
    	// #ifndef APP-PLUS-NVUE
    	height: calc(var(--status-bar-height) + 100rpx);
    	// #endif
    }
    .status-bar{ 
    	position: sticky;
    	top:0;
    	width: 750rpx;
    }
    .header-bar{ 
    	// #ifndef APP-PLUS-NVUE
    	display: flex;
    	// #endif
    	align-items: center;
    	justify-content: center;
    	position: relative;
    	padding: 0 30rpx;
    	height: 100rpx;
    }
    .back{ 
    	position: absolute;
    	left: 30rpx;
    	width: 60rpx;
    	height: 60rpx;
    }
    .title{ 
    	z-index: 2;
    	color: #FFFFFF;
    	font-size: 36rpx;
    }
    .header-right{ 
    	position: absolute;
    	right: 30rpx;
    }
    </style>

[20201023151100273]: /images/20210918/2c6012768bbc4ad3825ebfc747f06c08.png