Vant component NavBar and native H5 are adapted to Liu Haiping to solve the problem of unfixed top

Using vant2 on IOS phones with notch screens will cover the top when full-screen display requires the title bar to be fixed at the top, and the Tabs tab page is fixed below the title bar and does not slide with the page

Project dependencies:

  "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"
  },

Using 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>

Adapt Liu Haiping:

.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));
    }
  }
}

Use the TitleBar page:

<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>

Dynamic calculation of the distance between the Tabs tab page and the top ceiling:

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

 H5 page code: https://gitee.com/jiangzhuqingfeng/demo_vant2.git