解决齐刘海适配和多端适配

原创于 2024-06-05 16:45:52 发布 · 295 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

齐刘海适配：

uni.getSystemInfoSync() 获取的设备的信息，顶部高度

<template>
	<view>
    // 3. 动态绑定
		<view class="status_bar" :style="{height:topView + 'px'}">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top_view">
			👤
			<span>Lv3 获得加速卡</span>
			<span>领取权益</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topView: 0 // 存储高度
			}
		},
		onLoad() {
      // 1. 获取设备信息
			const res = uni.getSystemInfoSync()
			this.topView = res.safeArea.top
		}
	}
</script>

<style scoped>
  // 2. 去除height
	.status_bar {
		background-color: aqua;
		width: 100%;
	}

	.top_view {
		width: 100%;
		height: 30px;
		background-color: red;
		/* line-height: 30px; */
		padding: 0 15px;
	}
</style>

效果图：