uni-app 小程序 H5 主体内容和tabbar之间距离的兼容问题

使用uni-app的过程中,将h5页面运行到内置浏览器时内容底部的部分是会被tabbar遮挡掉的,但是在小程序上运行的话会自动留出tabbar高度的空间来适配页面。
为了兼容H5端,我们只需要在页面加上uni-app自带的css变量即可

html:


  	页面内容.....

css:

.page_home{
	padding-bottom: var(--window-bottom);
}

uni-app 小程序 H5 主体内容和tabbar之间距离的兼容问题_第1张图片
可以看到在内置浏览器中页面底部已经被自动填充了

小程序中的效果如下:
uni-app 小程序 H5 主体内容和tabbar之间距离的兼容问题_第2张图片

你可能感兴趣的:(uni-app,小程序,html5)