微信小程序开发常常需要适配机型问题,如iPhone X/XR等机型,底部有黑色横杠(称为安全距离),这时如果直接加css样式fixed是不行的,不会计算底部安全距离,而会与之重叠。

// fixed
.box {
	position: fixed;
	bottom: 0;
}

在这里插入图片描述
在这里插入图片描述

经过搜索后,我们知道env(safe-area-inset-bottom)计算安全距离,我想到一个通用的写法,具体做法是将页面高度page的高度限制为屏幕高度减去安全距离,代码实现是calc(100vh- env(safe-area-inset-bottom))

完整代码如下:

<scroll-view class="container" scoll-y="{{true}}">
	//正常html代码
</scroll-view>
page {
	height: calc(100vh- env(safe-area-inset-bottom));
	overflow: hidden;
}

//要给高度,不然scroll-view无法垂直方向滑动
.container {
	height: 100%;
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐