uniapp中scroll-view高度样式,解决手机端问题

.scroll-container {
	/* #ifdef H5 */
	height: calc(100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) - var(--status-bar-height));
	/* #endif */
	/* #ifdef APP-PLUS */
	height: calc(100vh - 88rpx - env(safe-area-inset-bottom));
	/* #endif */
}

以上为没有自定义导航栏和tab时对应的解决方案。h5端:100vh代表整个屏幕区域的高度,100rpx是导航栏高度,88rpx是顶部栏目分类tab的高度,接下来是底部安全距离和导航栏高度,这个是uniapp内部定义。APP端:100vh应该是当前webview也就是除去导航等app自带控件的高度,内容区域所占高度,所以只需要减tab高和安全距离即可。

如果使用了自定义导航就需要都减去自定义导航高度。100vh总的来说就是我们所写的内容块的高度(即template里的高度),自定义就包含进内容块里面了,系统默认的编译在外层,可以观察浏览器端的结构。

问题描述

一开始使用的是计算高度赋值给scroll-view,浏览器、模拟器、小程序测试都没有问题,但是手机端出现了问题,底部出现了多余的滑动空间。

你可能感兴趣的:(uni,css,微信小程序)