微信小程序 获取safeArea区域 滑动遮挡

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/yunhuaikong/article/details/102736567

最近做小程序，使用腾讯提供的官方IDE及API，只能说，这个鸡巴IDE和这个垃圾实现！！！！！！！

要获取设备当前的用户视图区域区域，你他妈的接口返回的就是一坨狗屎！！！！还他妈的是腾讯的工程师。。你特么的模仿苹果的safearea定义，你特么的写好一点啊，你写的那个四不像，是什么玩意。就说这是什么垃圾玩意。navbar高度没有，tabbar高度没有！你只有一个statusbar高度，那你写这么个残缺不全的有屁用！！！有些页面内容比较多，我们要用Scroll-view来进行滑动展示，有时候，特么的发现，会被遮挡，原因就是高度计算不对导致的。而官方提供的那个狗屎不全的东西完全没有参考意义。。。

好了，不吐槽了，我们来说说我们在小程序中如何正确的获取safearea区域。

safearea的定义：

去掉状态栏，去掉导航栏，去掉tabbar栏，剩余的屏幕大小就是用户可视化安全区域。

在你的页面的Wxss中定义整个界面的基样式。backgroundcolor忽略。。。如下：

然后在你的相应的页面中的wxml文件中增加页面根视图，在此基视图内部实现你的页面布局。如下：

然后在相应的js文件中实现如下代码来获取真正的可视区域高度尺寸。

stsHeight和nvgHeight是我本界面自定义的navgationbar+statubar的高度占用，读者朋友可以忽略。

有了这个高度，你就可以设置为你的scrollview的height.当scrolview的子视图高度累加之和大于这个值时，就可以正确的滑动而不被遮挡。

————————————————

版权声明：本文为CSDN博主「yunhuaikong」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/yunhuaikong/article/details/102736567