现在有个页面中由一个scroll-view组成
<!--index.wxml-->
<scroll-view scroll-y style="height: 100vh">
<view style="height: 100%; display: flex; align-items: center; justify-content: center;">scroll-view</view>
</scroll-view>
为了使scroll-view按照预期的方式工作，需要为其动态设置高度
如果使用的是小程序内置提供的tabBar
// app.json 中 tabBar 的配置
"tabBar": {
"position": "bottom",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/assets/icons/home.png",
"selectedIconPath": "/assets/icons/home-selected.png"
}, {
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/assets/icons/user.png",
"selectedIconPath": "/assets/icons/user-selected.png"
}]
}
不管是在 iphone6 还是 iphoneX 下，微信自动帮我们的页面处理了tabBar的高度，岁月静好，一切都works all fine!
然而，内置的tabBar往往是无法满足产品经理的奇思妙想的
那么，我们自然会切换到custom-tab-bar自己写一个
此时如图所示，custom-tab-bar 把咱们的 scroll-view 给盖住了一部分，说明我们的 scroll-view 还得减去 custom-tab-bar 的高度
height: calc(100vh - 96rpx（自定义的tabbar组件高度） - env(safe-area-inset-bottom)（适配苹果底部安全距离的高度）);
首页代码修改如下
<!--index.wxml-->
<scroll-view scroll-y style="height: calc(100vh - 112rpx - env(safe-area-inset-bottom))">
<view style="height: 100%; display: flex; align-items: center; justify-content: center;">scroll-view</view>
</scroll-view>
搞定