设置头部高度，App安全高度，以及小程序头部适配

最新推荐文章于 2024-04-29 15:25:42 发布

我就是一小白

最新推荐文章于 2024-04-29 15:25:42 发布

阅读量291

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/qq_43364234/article/details/131220775

版权

设置头部高度，App安全高度，以及小程序头部适配

<template>
	<view class="box-view screen-all flex">
		<view  :style="{height: statusBarHeight+ 'px'}"></view>
		<view class="topImageBox"  :style="{height: topHeight+ 'px'}">
			<image src="@/static/images/top_logo.png" mode="aspectFit" class=""></image>
		</view>
	</view>
</template>

<script>

	export default {
		components: {
		},
		data() {
			return {
				statusBarHeight:'',
				topHeight:''
			}
		},
		created() {
			this.setTopHeight();
		},
		methods: {
			/**
			 * 设置头部高度，App安全高度，以及小程序头部适配
			 */
			setTopHeight() {
				let systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topHeight = (menuButtonInfo.top - this.statusBarHeight) * 2+ menuButtonInfo.height
				this.$emit('getHeight',this.topHeight + this.statusBarHeight)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box-view{
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 30rpx;
	}
	.topImageBox image{
		width: 272rpx;
		height: 100%;
	}
</style>