支付宝小程序自定义状态栏，标题栏，标题栏文字。

2023-08-08 16:24| 来源: 网络整理| 查看: 265

1、app.json里面设置transparentTitle: 'none'，"titlePenetrate":"NO"设置全局标题栏不透明和标题栏不穿透属性。

"window": {

"transparentTitle": "none" ,

"titlePenetrate":"NO",

2、在需要开启标题栏透明效果的页面单独设置一下page.json ，并且设置导航栏标题为空不显示原系统标题，需要标题栏穿透就设置标题栏穿透属性。

{

"transparentTitle": "always",

"defaultTitle": "",

"titlePenetrate":"YES"

}

titlePenetrate：设置小程序导航栏为透明，默认 NO，支持 YES / NO 。注意要大写

transparentTitle：导航栏透明设置。默认 none，always一直透明 / auto 滑动自适应 / none 不透明

3、调用my.getSystemInfo来获取状态栏和标题栏高度

因为标题栏透明以后，axml里面的元素都会顶到状态栏里面，所以就要在page.js里需要先调用my.getSystemInfo获取状态栏和标题栏得高度，拿到状态栏和标题栏得高度。再this.setData赋值到data参数里面放到页面。

'状态栏高度statusBarHeight',res.statusBarHeight,'标题栏高度titleBarHeight',res.titleBarHeight

4、在axml页面设置标题栏和状态栏view标签，样式。页面动态取到statusBarHeight，titleBarHeight

为了能适配不同机型，设置布局用行内样式style，最这样标题栏和状态栏都能实时获取

//状态栏高度height:{{statusBarHeight}}px；//标题栏高度height:{{titleBarHeight}}px;

建议放在axml页面顶层。外层view设置宽度width=750rpx；然后用flex弹性布局来实现的水平和垂直居中，状态栏里面我用一个空元素中占位，你也可以不写。我需要换标题栏里面得标题文字，所以标题栏里面得标题也是动态获取更改。

注意：如果不加position:fixed;会造成不管页面内容有多少，只要页面下滑。上面自定义的栏都会跟着滑动。

爱疯x 、11pro、max等刘海屏都兼容，最后我测试了一下爱疯5，也是可以的。最后附上我实现功能时候参考文献

https://opensupport.alipay.com/support/knowledge/31867/201602391461?ant_source=zsearch

https://opensupport.alipay.com/support/knowCategory/31868/46937

【本文地址】

今日新闻