微信小程序中对custom-tab-bar高度的处理

现在有个页面中由一个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>

搞定