uniapp底部安全距离（safeAreaInsets）的实际应用

实际遇到的问题：页面底部的元素与 IOS 自带的导航条重叠了（图 1），调整后（图 2）

解决办法：safeAreaInsets获取屏幕边界到安全区域距离

// 获取屏幕边界到安全区域距离
    const { safeAreaInsets } = uni.getSystemInfoSync()

页面中增加一个 DOM 撑开 

<view :style="{ height: safeAreaInsets?.bottom*1.5 + 'px' }"></view>

我这个方法比较笨拙，因为增加了一个无用 DOM 消耗额外资源，应该用css 动态计算安全距离这些高阶玩法，但是我不会，有更有方案的评论区交流哈！！