uni 小程序 自定义导航栏头部

小程序 自定义导航栏头部

<template>
	<view class="home-container">
		<view class="navbar-fixed">
			<!-- 状态栏小程序撑起高度 -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="cu-bar" :style="{ height: navBarHeight + 'px' }">
				//自定义导航栏头部
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0 /* 状态栏高度 */,
			navBarHeight: 0 /* 导航栏高度 */,
			windowWidth: 375 /* 窗口宽度 */,
		};
	},
	components: {},

	methods: {},
	onLoad() {},
	onReachBottom() {},
	onPullDownRefresh() {},
	onShow() {
		// 获取手机系统信息
		const phoneInfo = uni.getSystemInfoSync();
		// console.log(phoneInfo);
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		this.statusBarHeight = phoneInfo.statusBarHeight;
		this.windowWidth = phoneInfo.windowWidth;
		// 除了h5 app mp-alipay的情况下执行
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		// 获取胶囊的位置
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
		this.navBarHeight = menuButtonInfo.bottom - phoneInfo.statusBarHeight + (menuButtonInfo.top - phoneInfo.statusBarHeight);
		this.windowWidth = menuButtonInfo.left;
		// #endif
	}
};
</script>
<style lang="scss" scoped>
.home-container {
	padding: 0 20rpx;
	background: #2266e1;
	.navbar-fixed {
		background: #2266e1;
		.cu-bar {
			display: flex;
			align-items: center;
			padding-left: 36rpx;
			box-sizing: border-box;
			color: #ffffff;
			.title {
				font-size: 34rpx;
				margin-right: 52rpx;
			}
			.search {
				width: 300rpx;
			}
		}
	}
}

</style>