uniapp最简单的底部兼容安全区域显示

2024-01-09 18:44:51

效果图：
在这里插入图片描述

1.html写上动态padding-bottom

<view class="button-wrap" :style="'padding-bottom:'+bottomPadding+'rpx'">
			<view class="com-btn cencel-btn">
				取消
			</view>
			<view class="com-btn confirm-btn " @click='onConfirmDlg'>
				确认
			</view>
		</view>

2.获取设备信息

const res = await uni.getSystemInfo({})
this.bottomPadding = (res.screenHeight - res.safeArea.bottom) * 2 || 30

文章来源:https://blog.csdn.net/weixin_43857653/article/details/135486102
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。