微信小程序自定义标题栏

以taro为例:

一般我们自定义标题栏,分为两步

1. 隐藏标题栏

2.   各页面配置文件　 index.config.js 里面

   export default{
       navigationStyle:'custom'
   }
   

   其他关于小程序配置,如navigationBarTitleText等,也可在各页面分别配置,灵活性很好

3. 设置标题部分

这部分,我们只需编写成自己想要的头部样式即可,但一般还需要计算一下顶部状态栏以及胶囊部分的高度.

//获取系统信息同步接口,里面有状态栏的高度,窗口可视高度等,详细可以查询API
Taro.getSystemInfoSync()
//{
    statusBarHeight:'状态栏的高度，单位px' //
}
//获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
Taro.getMenuButtonBoundingClientRect()
//单位都是px
{
height:'胶囊的高度',
top:'上边界坐标，单位：px'
}

更详细的参数可以查看API，上面的值可对照下面的图看下（略粗糙，意会就好）

如有错漏，烦请指正