Vant组件NavBar和原生H5适配刘海屏，解决顶部不固定问题

使用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:

适配刘海屏：

.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页面:

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

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

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