uniapp自定义顶部状态栏

佩淇呢

已于 2024-01-04 11:04:11 修改

阅读量4.4k

点赞数 27

分类专栏： javascript uniapp 文章标签： uni-app 前端 javascript

于 2024-01-04 10:59:51 首次发布

本文链接：https://blog.csdn.net/m0_67880202/article/details/135379736

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

使用的是vite + vue3的setup语法糖。

最终实现的效果为：

1.pages.json 中配置`"navigationStyle": "custom"。以首页为例。`

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",  //单个页面设置
				"navigationBarTitleText": "首页"
			}
		}
	],
	
	"globalStyle": {
        // 全局配置
		"navigationStyle": "custom"
	}
}

2.创建components目录，在components目录下创建navbar.vue组件

3.分析结构

顶部状态栏实际上分为两个部分，一个是系统状态栏，一个是状态栏的下方的内容区域。

大致就是图上两个部分。结构分出来后也就比较明了先要做啥了。

（1）获取顶部系统状态栏的高度

不同手机顶部的系统状态栏的高度是不一样的，可以通过方法uni.getSystemInfoSync() 获取顶部安全区域高度。拿到方法中的两个属性statusBarHeight,system。

const setNavSize = ()=>{
		const { statusBarHeight,system } = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2
		const isIOS = system.indexOf('iOS') > -1
		if( !isIOS ){
			navHeight.value = 96  //非ios
		}else{
			navHeight.value = 88  //ios
		}
	}

由于iOS有刘海屏所以，iOS的内容高度为88。

（2）内容部分

首先当我们在主页时，出现主页的图标。

当我们主页有跳转内容时，点击跳转按钮进行跳转后，也就是当前不在主页页面，此时图标会变成返回图标。

HTML实现代码：

<!-- 内容 -->
		<view class="navbar" :style= " 'height:' + navHeight +'rpx;' + containerStyle">
			<view class="back-icon" @click="backHome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png" mode=""></image>
				<image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style=" 'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;'+ textStyle ">{{titleText}}</view>
			</view>
		</view>

当页面有其他内容而不只是单单的图标时。

此时我们通过传入一个变量“isHome”配合v-if和v-else来实现该效果。

<view v-if="isHome" class="headNav" :style="'height:'+ navHeight + 'rpx;line-height:'+ navHeight + 'rpx;padding-left:20rpx'" >
			<text class="city">中部地区</text>
			<view style="flex:1">
				<navigator
					url="../../pages/search/index"
					:style=" 'height:'+ menu.height*2 + 'rpx;line-height:'+ menu.height*2 + 'rpx;margin-top:'+ (menu.top*2 - status) + 'rpx;margin-left:32rpx;margin-right:'+ (menu.width*2 + 24) + 'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<!-- 内容 -->
		<view v-else class="navbar" :style= " 'height:' + navHeight +'rpx;' + containerStyle">
			<view class="back-icon" @click="backHome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png" mode=""></image>
				<image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style=" 'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;'+ textStyle ">{{titleText}}</view>
			</view>
		</view>

内容部分需要获取内容部分的高度，还需要知道胶囊的位置大小，从而来计算搜索框的大小。通过uni.getMenuButtonBoundingClientRect()来获取胶囊的位置大小。

整个的实现代码如下：

<template>
	<view class="nav">
		<!-- 状态栏 -->
		<view :style= "'height:' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:'+ navHeight + 'rpx;line-height:'+ navHeight + 'rpx;padding-left:20rpx'" >
			<text class="city">中部地区</text>
			<view style="flex:1">
				<navigator
					url="../../pages/search/index"
					:style=" 'height:'+ menu.height*2 + 'rpx;line-height:'+ menu.height*2 + 'rpx;margin-top:'+ (menu.top*2 - status) + 'rpx;margin-left:32rpx;margin-right:'+ (menu.width*2 + 24) + 'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<!-- 内容 -->
		<view v-else class="navbar" :style= " 'height:' + navHeight +'rpx;' + containerStyle">
			<view class="back-icon" @click="backHome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png" mode=""></image>
				<image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style=" 'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;'+ textStyle ">{{titleText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onBeforeMount,defineProps } from 'vue'
	const props = defineProps({
		background:{
			type:String,
			default:'rgba(255,255,255,1)'
		},
		color:{
			type:String,
			default:'rgba(0,0,0,1)'
		},
		fontSize:{
			type:String,
			default: 32
		},
		iconWidth:{
			type:String,
			default: 116
		},
        iconHeight:{
        	type:String,
        	default: 38
        },
		titleText:{
			type:String,
			default: ''
		},
		isHome: {
			type:Boolean,
			default:false
		}
	})
	//状态栏高度
	const status = ref(0)
	//内容高度
	const navHeight = ref(0)
	//背景颜色
	const containerStyle = ref('')
	//字体样式
	const textStyle = ref('')
	//图标样式
	const iconStyle = ref('')
	//页面栈数量
	const pages = ref(getCurrentPages().length)
	//获取胶囊的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	onBeforeMount(()=>{
		setNavSize()
		setStyle()
	})
	//计算状态栏高度
	const setNavSize = ()=>{
		const { statusBarHeight,system } = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2
		const isIOS = system.indexOf('iOS') > -1
		if( !isIOS ){
			navHeight.value = 96  //非ios
		}else{
			navHeight.value = 88  //ios
		}
	}
	//样式设置
	const setStyle = ()=> {
		containerStyle.value = ['background:'+ props.background].join(';')
		textStyle.value = ['color:'+ props.color,'font-size:'+props.fontSize+'rpx'].join(';')
		iconStyle.value = ['width:'+ props.iconWidth + 'rpx' , 'height:'+ props.iconHeight +'rpx'].join(';')
	}
	const backHome = ()=> {
		if(pages.value > 1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
</script>

<style>
.nav{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.back-icon{
	display: flex;
	align-items: center;
	width: 64rpx;
	height: 100%;
	margin-left: 20rpx;
}
.back-icon image{
	width: 64rpx;
	height: 64rpx;
}
.navbar{
	position: relative;
}
.nav-title{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%)
}
.headNav{
	display: flex;
}
.city {
    display: inline-block;
    position: relative;
    font-size: 30rpx;
    font-weight: bold;
    padding-left: 55rpx;
    background: url(data:image/png;base64,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)
        no-repeat left center;
    background-size: 40rpx;
}

.city:after {
    content: ' ';
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 1px 1px 0 0;
    border-color: #353535;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: -10px;
}
.search-text {
    display: inline-block;
    padding-left: 30rpx;
    color: #bbbbbb;
    font-size: 26rpx;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAPWSURBVHja1FpNSFRRFH4+Zikig4sQkUeEtAgrk4EMCXFCiwhjoN9FrdpIixYREbMIEYkWLUKCCGqjaTUkEbUYXYSMyWASLUJC4hExuJBw4TKkc/IMXYY592fevY/XgY+Bd//eN+ece35mmorFomdJAuZ56DmUbDb79zMV4aV9QAYwAOgFdAGaa+ZtA9YAq4AFwApgxwW5VAMEOgCjgAsa85uJJOIaPZsGTAIqNgn5BgR6AI8Ai5okOLkEKBGZHolJWicS0It/AgxbtIZTtOc5G2RURPaRFiYc+us9wEM6ywmR/YDXlrXAyWlAgc606uz47bwEHNDY4xdgjnxnA/CDnncC9gD6ASOAtGKfbsAsIAdYt0EkIFWrSOBVegfwjbl9vtLnM8AYXc/jdIPJyDwAXDe90VKMY8vMCePAZcCywWEhAUn3AaYUZvYB8MqETK2PpBWO/RNwFDDTYAzANUuAI4Dvknn3NUyRJRKQ6jlB2x8ElCM6dkiR/qTgT/Xkrsm1LBLpUJhUjkzDluBeZwG/JSbWbkokoLSDk4uATQfXLmrmimR8VFcrvvDJpR1lQ8c2lSUixKUzvgmRjGRO3nEqHtI1zkmvCZFBZnzTsl9wgqn+FjM2YEKkhxl/47owErQyF1UjAUXderLoxSfcWV06Du8LBRAXAOMS7qwWG2n8RoxEKnFUiHGI73Jxe4xE2m0Q2U4wkS1dIqEkVvTHSOS4JMaEuhpZYcZHbHU5NBocZyQpjLZpLTDjaUmMsSlYq7cyYyUTIiuSOeOOtRJIirkdSUJZlwgumJakCH2OyAS09yFm/IluiuQLuc6kZB7W2G0OiLQp6venjcQRjKzvJHMLlv2li/bkZMYks/BrMtC8ZG4nXQoZC+aE2fZ72pOTiShdFGy23ZLMx7r+I1VuQQSfwJ7vXo2bLGiUCH4DLwBvFWumyCyGNQ8LaG5B4ROizJL2tcikmCLnBqm9W7K2ah5b3r+WaUVIxzso7ai2TFsb0CCSOS+8lxERlHXaYFZBxqMXvEpwIVpkfEUdnVOYWVyiNDNVGo+awYbyzaST0SlmUJ3YUD5sWTsYJw4KZhOJjG5VhmQ+k3aOSdIZlWB79LG32wi/Dfji7TYAI5Mx/VU3JFQoeGIeJv483VKnKFqjVLxECWBYZ09PuFwaugCaEvSHgWrELxiciT3p5Ww2G6Ys2nxoab2JZp4DhnBtkrooVTKmPjM2Pz8fJI2ISCanOT8TuZfkmMyqAZnEEhHJqMysnHQiuj6Tx1sr6UREMkM1TRJ8dsKjnlzK+z+kGohrG4lh9Y9nfwQYAJts3SyOpWPCAAAAAElFTkSuQmCC)
        no-repeat left center;
    background-size: 23rpx;
}
</style>

4.使用组件navbar

在主页的HTML中使用组件，根据需要传入自定义属性

<navbar :isHome="true"/>

佩淇呢

关注

27
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
uniapp自定义顶部状态栏

使用的是vite + vue3的setup语法糖。2.创建components目录，在components目录下创建navbar.vue组件顶部状态栏实际上分为两个部分，一个是系统状态栏，一个是状态栏的下方的内容区域。大致就是图上两个部分。结构分出来后也就比较明了先要做啥了。不同手机顶部的系统状态栏的高度是不一样的，可以通过方法获取顶部安全区域高度。拿到方法中的两个属性statusBarHeight,system。由于iOS有刘海屏所以，iOS的内容高度为88。首先当我们
复制链接

扫一扫