uniapp 自定义标题栏

在自定义标题栏的需求中常常是为了监听返回按钮事件或是为了实现带背景图片的标题栏需求。

1. 无论是什么目的，首先要在page.json配置文件中修改navigationStyle为custom。

{
    "path": "pages/home",
        "style": {
            "navigationBarTitleText": "记事本",
            "enablePullDownRefresh": true,
            "navigationStyle": "custom",
            "navigationBarTextStyle": "white"
          }
}

2. 处理标题栏UI部分

2.1 监听返回按钮。可以使用uni-nav-bar或是u-navbar，可设置背景颜色。

2.2 自定义标题栏UI，设置背景图片。

background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url($env_img_url + '/dir/home_bg.png'); 

指定标题内容高度：
height: 44px;
获取状态栏高度：
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
view设置padding-top:
:style="{'padding-top':`${statusBarHeight}`}"

2.3 页面处标题栏的区域，如果需要指定高度，则要减去statusBarHeight。
如scroll-view设置高度，:style="{'height': `calc(100vh - env(safe-area-inset-bottom) - 44px - ${statusBarHeight})`}"。

2.4 标题栏bottom区域固定在头部
<u-sticky offset-top="0"></u-sticky>