uniapp自定义顶部导航并解决打包成apk后getMenuButtonBoundingClientRect方法失效问题

请叫我欧皇i2024-01-06 8:03

需求：要在app上的顶部导航提示哪里添加一些东西进去，用uniapp自带的肯定不行啊，所以自定义了所有的页面的顶部导航，之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方法才实现，记录一下

1.自测手机上效果

2.实现

在pages.json页面给所有需要顶部导航栏的添加自定义样式

"enablePullDownRefresh": false,是否开发下拉刷新

"navigationStyle": "custom"：导航栏样式自定义

javascript 复制代码

{
			"path": "pages/serve/index",
			"style": {
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			}

		}

3.封装+主要代码讲解

创建封装的Title.vue页面

// #ifndef H5 || APP-PLUS || MP-ALIPAY // #endif

这个是预处理指令，这个指令的意思是："如果H5、APP-PLUS或MP-ALIPAY这三个宏（或标识符）中的任何一个没有被定义，则执行以下的代码

uni.getSystemInfoSync()：同步获取系统的信息

uni.getMenuButtonBoundingClientRect()：方法来获取某个菜单按钮的边界信息。这个方法通常用于获取某个DOM元素的边界信息，包括其位置和尺寸。

javascript 复制代码

			// #ifndef H5 || APP-PLUS || MP-ALIPAY
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		
			// #endif

javascript 复制代码

<template>
	<!-- 头部导航内容区域 -->
	<view style="margin-bottom: 20rpx;" class="top-content">
		<view class="title-top">
			<view class="boxAndTop" :style="{height:statusBarHeight+'px'}"></view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			titleName: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				titleBarHeight: 82 + 11,
				menuFlag: false
			}
		},
		created() {
			//获取状态栏的高度
				let systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight
				console.log(this.statusBarHeight,'状态栏的高度');
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		
			// #endif

		},
		methods: {
		},
	}
</script>

<style lang="scss">
	.top-content {
		// position: fixed;
		height: 140rpx;

		.title-top {
			position: fixed;
			top: 0px;
			width: 100%;
			z-index: 999;
			height: 140rpx;
			background-color: #fff;
		}
	}

</style>

4.在页面导入使用

javascript 复制代码

	<Title titleName="设备管理" />	

import Title from '@/component/Title.vue'
export default {
		components: {
			Title
		},
}

文章到此结束，希望对你有所帮助~