ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/8/3 16:12:03 拓冰建站 浏览量
uniapp最简单的底部兼容安全区域显示

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

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