uniapp小程序开发设置系统状态栏高度、全屏背景图设置

效果：

uniapp小程序开发设置系统状态栏高度/全屏背景图设置

	<view class="login">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<image src="../../static/login.png" mode="" class="img"></image>

		<button open-type="getUserInfo" @getuserinfo="wxLogin" class="submit">
			<image class="wxicon" src="../../static/wx.png" mode=""></image><text>微信快速登录</text>
		</button>
		<text class="agree" @click="toAgree">查看用户协议</text>
	</view>
</template>

• css

<style lang="less">
	page {
		height: 100%;
	}

	.login {
		position: relative;
		width: 100%;
		height: 100%;

		.status_bar {
			position: fixed;
			top: 0;
			height: var(--status-bar-height);
			width: 100%;
			background-color: #465400;
		}

		.img {
			width: 100%;
			height: 98%;
		}

• 注意page高度需100%
• 状态栏去掉就可实现全屏背景

系统状态栏高度官方文档

全屏背景图设置