首先，我们需要了解如何设置标题栏透明：[url]https://openclub.alipay.com/read.php?tid=13793&fid=101[/url]；
以及如何获取状态栏和标题栏高度：[url]https://openclub.alipay.com/read.php?tid=13796&fid=101&page=1[/url]。
根据上面所学之后，那么我们开始实现自定义标题栏：
1.在app.json里设置不透明：
2.在页面page.json里配置透明效果，且标题title为空：
3.页面标题栏透明后，页面的组件元素都会往上顶到状态栏里，所以我们需要获取状态栏高度和标题栏的高度，标题栏高度就是自定义标题栏的高度，状态栏高度则是标题栏上外边距，话不多说，上代码，先是page.js里需要先调用my.getSystemInfo来获取状态栏和标题栏高度，再this.setData赋值到data里：
4.接下来是page.axml文件了，这里就开始设置布局；一定用行内样式style（外部样式.css不能设置变量参数），这样才能动态取到标题栏和状态栏的高度，来适配各种机型（不同机型可能状态栏高度不同）；最外层view设置宽度width=750rpx，然后我用的是flex弹性布局来实现的水平和垂直居中，弹性布局里就需要用行级标签了，所以文本我这边用block标签（标题不一定是文本，也可以自己放图片、icon等）；最后就是position:fix固定位置距离top:{{statusBarHeight}}状态栏的高度即可。
看看效果吧。