uniapp自定义头部导航怎么实现？

"navigationStyle": "custom"

<view :style="{ height: headheight + 'px', backgroundColor: '#24B7FF', zIndex: 99, position: 'fixed', top: '0px', width: '100%' }">
</view>
<view class="head" :style="{ top: headheight + 'px', backgroundColor: '#24B7FF' }">
  <view>新乡市</view>
</view>
<view style="height: 100rpx;"></view>

headheight: '',

const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.statusBarHeight;
this.headheight = windowHeight;

.head {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    height: 100rpx;
    width: 100%;
    z-index: 99;
  }