uniapp小程序--头部处理

代廷耀

已于 2024-03-20 14:03:42 修改

阅读量436

点赞数 3

文章标签： uni-app 小程序

于 2024-03-08 11:19:07 首次发布

本文链接：https://blog.csdn.net/m0_56983341/article/details/136555680

版权

uniapp小程序头部状态处理

js:
    // 系统信息  应对手机头部摄像头等的处理
	const SYSTEM_INFO = uni.getSystemInfoSync();
	// 获取状态栏高度 小程序存在
	const statusBarHeight = ref(SYSTEM_INFO.statusBarHeight|| 0 )
	
	
	// 获取胶囊信息  仅小程序存在    --抖音小程序在左上角会有一个功能框、需额外处理
	const titleBarHeight = ref(0);
	//#ifdef/#ifndef 应对多端编译的差异
	// #ifdef MP
	let {top,height} = uni.getMenuButtonBoundingClientRect();
	titleBarHeight.value = (height + (top - statusBarHeight.value) * 2)
	// #endif
	// #ifndef MP
	titleBarHeight.value = 60
	// #endif

在视图上使用：style进行高度处理：

<template>
	<view class="layout">
		<view class="navbar">
			<!-- 小程序头部空格空间 -->
			<view class="statusBar" :style="{height:statusBarHeight+ 'px'} "></view>
			<!-- 头部主要部分  名称与搜索 -->
			<view class="titleBar" :style="{height:titleBarHeight+ 'px'}">
				<view class="title">{{title}}</view>
					<view class="search">
						<uni-icons type="search" color="#8888" size="18"></uni-icons>
						<text>搜索</text>
					</view>
				</view>
			</view>
		<!-- 设置高度  应对下方部分内容被遮盖 -->
		<view class="fill" :style="{height:(statusBarHeight + titleBarHeight) + 'px'}"></view>
		
	</view>
</template>

将处理步骤进行封装

封装的js文件

// 系统信息
	const SYSTEM_INFO = uni.getSystemInfoSync();
	
	// 获取状态栏高度 小程序存在
	export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight|| 0 ;
	
	// 获取内容高度  最好与头部胶囊按钮高度一直
	export const getTitleBarHeight = () => {
		if(uni.getMenuButtonBoundingClientRect){
			// 获取胶囊信息
			let {top,height} = uni.getMenuButtonBoundingClientRect();
			return height + (top - getStatusBarHeight()) * 2;
		}else{
			return 60;
		}
	}
		// 获取去除胶囊距离（宽度+右边距）的宽度
	export const  getNavBarWidth = () => {
		let width = SYSTEM_INFO.windowWidth || 375;
		// #ifdef MP
			if(uni.getMenuButtonBoundingClientRect()){
				// 获取胶囊信息
				let {left} = uni.getMenuButtonBoundingClientRect();
				return left ;
			}else{
				return 375;
			}
		// #endif
		// #ifndef MP
		  return width;
		// #endif
	}
	
	// 获取导航头部总高度
	export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();

在页面中的使用

<template>
	<view class="layout">
		<view class="navbar">
			<!-- 小程序头部空格空间 -->
			<view class="statusBar" :style="{height:getStatusBarHeight()+ 'px'} "></view>
			<!-- 头部主要部分  名称与搜索 -->
			<view class="titleBar" :style="{height:getTitleBarHeight()+ 'px'}">
				<view class="title">{{title}}</view>
					<view class="search">
						<uni-icons type="search" color="#8888" size="18"></uni-icons>
						<text>搜索</text>
					</view>
				</view>
			</view>
		<!-- 设置高度  应对下方部分内容被遮盖 -->
		<view class="fill" :style="{height:getNavBarHeight()+ 'px'}"></view>
		
	</view>
</template>

<script setup>
	import {getNavBarHeight,getStatusBarHeight,getTitleBarHeight} from '@/utils/babel-header.js'
</script>

在vue2中使用需要将方法先在页面中进行调用，例如created||mounted||computer中调用

<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:StatusBarHeight + 'px'}"></view>
			<view class="titleBar">
				<view class="content">
					title   {{StatusBarHeight}}
				</view>
				<view class="menuButton"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStatusBarHeight} from "@/utils/babel-header.js"
	export default {
		name:"index-header",
		data() {
			return {
				StatusBarHeight:0,
			};
		},
		created(){
			this.StatusBarHeight = getStatusBarHeight()
			console.log(this.StatusBarHeight);
		}
	}
</script>