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

需求:要在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

这个是预处理指令,这个指令的意思是:"如果H5APP-PLUSMP-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
		},
}

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

相关推荐
清风细雨_林木木18 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮18 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友18 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟18 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
吴传逞2 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921433 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008893 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !3 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw53 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007473 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview