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

本文主要是介绍uniapp底部安全距离（safeAreaInsets）的实际应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

页面中增加一个 DOM 撑开 

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

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

这篇关于uniapp底部安全距离（safeAreaInsets）的实际应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---