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
		},
}

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

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手5 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_15 小时前
搭建商城系统
java·uni-app·php
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
CRMEB定制开发11 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
today喝咖啡了吗18 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战20 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术1 天前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递