van-nav-bar 设置fixed使视图下移
时间: 2023-07-07 13:33:37 浏览: 161
vant 自定义 van-dropdown-item的用法
5星 · 资源好评率100%
van-nav-bar 的 fixed 属性会将导航栏固定在页面顶部,因此会使得页面的内容下移。如果你希望页面内容不下移,可以考虑在页面内容的容器上添加一个与导航栏高度相等的 padding-top 属性,例如:
```html
<template>
<div class="page">
<van-nav-bar title="标题" fixed />
<div class="content" :style="{ paddingTop: navBarHeight + 'px' }">
页面内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
navBarHeight: 44 // 导航栏高度
};
}
};
</script>
<style>
.page {
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
</style>
```
这样可以保持页面内容不下移,并且让内容与导航栏之间有一定的间距。
阅读全文