小程序自定义导航栏（兼容iphoneX）

最新推荐文章于 2025-02-27 14:38:40 发布

Redundantº

最新推荐文章于 2025-02-27 14:38:40 发布

阅读量1k

点赞数 1

文章标签：小程序微信小程序前端 uni-app

本文链接：https://blog.csdn.net/qq_45256497/article/details/122984779

版权

第一步，首先在pager.json中修改globalStyle中的navigationStyle属性(default是默认哟)

第二步，在APP.vue中获取自定义tabBar高度

export default{
    globalData: {
			statusBarHeight:0,
			titleBarHeight:0
		},
    onLaunch:function(){
        this.getStatusBar()
    },
    methods:{
		getStatusBar(){
		uni.getSystemInfo({
			success: (res) => {
			this.globalData.statusBarHeight = res.statusBarHeight
			this.globalData.titleBarHeight = uni.getMenuButtonBoundingClientRect().bottom + uni.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)
				  }
				})
			},
			// 获取自定义tabbar的高度,rpx单位
			getTabBarH(){
				return this.unitTransform(getApp().globalData.statusBarHeight + getApp().globalData.titleBarHeight,'rpx')
			},
			// 获取tabbar高度-兼容不同设备，兼容iphoneX，返回 50px 字符串
			getTabbarH(){
				const res = uni.getSystemInfoSync();
				let tabBarH = (res.screenHeight-res.safeArea.bottom + 50)+'px'
				return tabBarH
			},
			// 单位转换 px 转 rpx  type转换类型
			unitTransform(num,type){
				switch(type){
					case 'rpx': return num * 750 / uni.getSystemInfoSync().windowWidth;break;
					case 'px': return num / 750 * wx.getSystemInfoSync().windowWidth;break;
				}
			}
		}
}

第三步，运用到页面中，再设置一下样式就可以啦

<template>
	<view class="">
		<!-- 导航栏 -->
		<view class="w-100" style="background: pink;">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view :style="{height:titleBarHeight+'px'}" class="f32 flex ja">我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0
			}
		},
		onLoad() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.titleBarHeight = getApp().globalData.titleBarHeight
		}
	}
</script>

<style>
</style>