uniapp自定义导航头，页面内容自动盛满禁止滚动效果

1.pages.jso设置自定义头部 “navigationStyle”: “custom”

{"path" : "pages/a/a","style" : {"navigationBarTitleText" : "自定义头","navigationStyle": "custom"}},

2.效果 源码

<template><view class="container"><view class="custom-navbar" :style="{ height: navBarHeight + 'px' }"><view class="title" :style="{ top: titleTop + 'px', height: titleHeight + 'px' }">123</view></view><view class="content"><text>asasa</text></view></view>
</template>
<script>
export default {data() {return {navBarHeight: 0,  titleTop: 0,  titleHeight: 0 };},onLoad() {this.calculateNavBarHeight();},methods: {calculateNavBarHeight() {const systemInfo = uni.getSystemInfoSync();const menuButtonInfo = uni.getMenuButtonBoundingClientRect();this.navBarHeight = menuButtonInfo.bottom + (menuButtonInfo.top - systemInfo.statusBarHeight);this.titleTop = menuButtonInfo.top;this.titleHeight = menuButtonInfo.height;}}
};
</script>
<style>.container {display: flex;flex-direction: column;height: 100vh;}.custom-navbar {background-color: red;position: relative; }.title {position: absolute;left: 50%;  transform: translateX(-50%); color: white;font-size: 16px;font-weight: bold;display: flex;align-items: center;justify-content: center;}.content {flex: 1;  background-color: green;display: flex;align-items: center;justify-content: center;}
</style>