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