使用vant2在IOS有刘海屏手机上全屏展示会覆盖顶部，需要标题栏固定顶部，Tabs标签页固定在标题栏下方，都不随页面滑动

项目依赖：

  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "vant": "^2.12.47",
    "vue": "^2.6.11",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "postcss-px-to-viewport": "^1.1.1",
    "vue-template-compiler": "^2.6.11"
  },

使用NavBar:

<template>
  <van-nav-bar
    style="position: sticky; background-color: #dedede"
    :title="title"
    :left-arrow="leftArrow"
    :border="border"
    :fixed="false"
    :placeholder="false"
    :safe-area-inset-top="false"
    @click-left="goback"
    @click-right="onClickRight"
  >
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>

适配刘海屏：

.van-nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
}
/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone 12 pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
      // height: calc(50px + constant(safe-area-inset-top));
      // height: calc(50px + env(safe-area-inset-top));
    }
  }
}

使用TitleBar页面:

<template>
  <div class="index">
    <title-bar
      id="titleBarIndex"
      title="首页"
      :left-arrow="false"
      @clickRight="onClickRight"
    >
      <template #right>
        <div>设置</div>
      </template>
    </title-bar>
    <van-tabs
      v-model="active"
      line-height="2"
      :sticky="true"
      :offset-top="offsetTop"
      :swipeable="true"
      color="#3667FF"
      @change="onChangeTabItem"
      title-inactive-color="#919191"
      title-active-color="#3667FF"
    >
      <van-tab :title="`未读(${listLeft.length})`">
        <van-pull-refresh
          v-if="listLeft.length > 0 || loading"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            finished-text="没有更多了"
            :finished="true"
            style="background: #f6f9ff"
          >
            <div
              v-for="(item, index) in listLeft"
              :key="index"
              class="item"
              @click="onClickItem(item)"
            >
              {{ item }}
            </div>
          </van-list>
        </van-pull-refresh>
        <van-empty v-else style="margin-top: 40%">
          <template #description>
            <div class="tip">您暂无消息提醒</div>
          </template>
        </van-empty>
      </van-tab>
      <van-tab :title="`总数(${totalServe})`">
        <van-pull-refresh
          v-if="listRight.length > 0 || loading"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            style="background: #f6f9ff"
          >
            <!-- <div style="height: 46px"></div> -->
            <div
              v-for="(item, index) in listRight"
              :key="index"
              class="item"
              @click="onClickItem(item)"
            >
              {{ item.title }}
            </div>
          </van-list>
        </van-pull-refresh>
        <van-empty v-else style="margin-top: 40%">
          <template #description>
            <div class="tip">您暂无消息提醒</div>
          </template>
        </van-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

Tabs标签页与顶部吸顶距离动态计算：

 //设置与顶部吸顶的距离
    this.offsetTop = document.getElementById("titleBarIndex").offsetHeight;

 H5页面代码:https://gitee.com/jiangzhuqingfeng/demo_vant2.git