uni-app在H5端底部部分内容被tarbar遮盖,显示不全

问题:在H5端时,底部的部分内容被tarbar遮盖住,小程序端是正常的,如下两图所示:

小程序端

 uni-app在H5端底部部分内容被tarbar遮盖,显示不全_第1张图片

 H5端(chorme浏览器)

uni-app在H5端底部部分内容被tarbar遮盖,显示不全_第2张图片

原因:导航栏和 tabbar 均是原生控件,元素区域坐标是不包含原生导航栏和 tabbar 的;而 H5 里导航栏和 tabbar 是 div 模拟实现的,所以元素区域坐标会包含导航栏和tabbar的高度。

解决:通过uni-app自带的2个css变量:--window-top 和 --window-bottom,这代表了页面的内容区域距离顶部和底部的距离。也就不需要再通过条件编译进行css的编写;

小程序端

uni-app在H5端底部部分内容被tarbar遮盖,显示不全_第3张图片

H5端(chorme浏览器)

uni-app在H5端底部部分内容被tarbar遮盖,显示不全_第4张图片

你可能感兴趣的:(前端,uni-app,前端)