Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ios 端自定义导航栏距离顶部太高了 #611

Open
echobool opened this issue Jan 4, 2025 · 2 comments
Open

ios 端自定义导航栏距离顶部太高了 #611

echobool opened this issue Jan 4, 2025 · 2 comments

Comments

@echobool
Copy link

echobool commented Jan 4, 2025

问题描述
ios 端 Navbar 自定义导航栏 导航栏距离顶部太高了 更新后出现的
其它端正常 真机没有运行过 模拟器上换了几个型号都一样

截图
image

版本(请填写以下信息)

  • HBuilderX:4.44
  • uview-plus:3.3.61

智能手机(请填写以下信息)

  • 设备: iPhone14 pro plus
  • 操作系统: iOS16.4
@echobool
Copy link
Author

echobool commented Jan 8, 2025

找到问题了,原因是在 u-status-bar.vue 文件中,
data() { return { isH5: false // 原来是 true 下面已经判断了 这里默认改为false } },

否则上面会叠加 u-safe-area-inset-top 样式上,作者目的是给 H5才添加样式,如下为true , app-plus 也会有这个样式导致。

@ijry
Copy link
Owner

ijry commented Jan 18, 2025

覆盖下面的试试

<template>
	<view
	    :style="[style]"
	    class="u-status-bar"
		:class="[isH5 && 'u-safe-area-inset-top']"
	>
		<slot />
	</view>
</template>

<script>
	import { props } from './props';
	import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
	import { addUnit, addStyle, deepMerge, getWindowInfo } from '../../libs/function/index';
	/**
	 * StatbusBar 状态栏占位
	 * @description 本组件主要用于状态填充,比如在自定导航栏的时候,它会自动适配一个恰当的状态栏高度。
	 * @tutorial https://uview-plus.jiangruyi.com/components/statusBar.html
	 * @property {String}			bgColor			背景色 (默认 'transparent' )
	 * @property {String | Object}	customStyle		自定义样式 
	 * @example <u-status-bar></u-status-bar>
	 */
	export default {
		name: 'u-status-bar',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				isH5: false
			}
		},
		created() {
			// #ifdef H5
			this.isH5 = true
			// #endif
		},
		computed: {
			style() {
				const style = {}
				// 状态栏高度,由于某些安卓和微信开发工具无法识别css的顶部状态栏变量,所以使用js获取的方式
				let sheight = getWindowInfo().statusBarHeight
				if (sheight == 0) {
					this.isH5 = true
				} else {
					style.height = addUnit(sheight, 'px')
				}
				style.backgroundColor = this.bgColor
				return deepMerge(style, addStyle(this.customStyle))
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-status-bar {
		// nvue会默认100%,如果nvue下,显式写100%的话,会导致宽度不为100%而异常
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}
</style>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants