uniapp如何获取H5、小程序（app）底部导航栏高度，如何解决tabBar遮挡

H5

tabbar的高度：var(--window-bottom)

uniapp给出的说明页面样式与布局 | uni-app官网

小程序、app

tabbar的高度：env(safe-area-inset-bottom)

解决tabBar遮挡

给page页面设置内边距（padding-bottom），可以解决tabBar遮挡问题

也可以直接在全局css里面添加该样式，后续直接添加class属性名即可

/**
 * 兼容底部横线底部内边距
 */
.bottom-line-exclude {
    /* #ifndef APP */
    padding-bottom: calc(env(safe-area-inset-bottom) - 40rpx);
    /* #endif */

    /* #ifndef H5 */
    padding-bottom: var(--window-bottom);
    /* #endif */
}