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

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

钉钉/支付宝小程序自定义组件
钉钉/支付宝小程序自定义组件 1.新建自定义文件夹 eg:model 2.鼠标选中model 右键>新建小程序组件输入测试组件:demo 3.新建小程序组件包含四个文件: 1.acss:组件页 ...
支付宝小程序自定义Map地图marker
最近要做一个支付宝小程序,公司呢又不确定后面要不要做微信小程序,所以决定用uni-app开发,其中一个要求就是,地图的marker可自定义,由于设计图没出来,只是口头描述了一下... 什么样的自定义m ...
支付宝小程序自定义顶部---uniapp
有一个问题,支付宝小程序的顶部导航栏怎么可以去掉原生的呢? 看到社区回答:在对应页面的json文件中配置 "mp-alipay": {"transparentTitle& ...
微信小程序自定义状态栏
首先修改 app.json文件中的 windows字段如下: {"pages": ["pages/index/index"],"window" ...
微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
支付宝小程序实现自定义地区三级联动
支付宝小程序自定义地区三级联动场景数据结构: [{"id": 110000,"name": "北京市","children&qu ...
uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录微信支付宝小程序通用功能 1.checkbox样式 2.分享功能支付宝小程序参数微信小程序参数其他兼容问题 H5 微信小程序支付宝小程序持续更新中... 微信支付宝小程序通用功能 ...
安卓小程序自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
[小黄书小程序]导航栏和标题栏界面
我们前面几章已经将小黄书的后台基础框架给搭建好了.后台的小黄书相关的业务逻辑,会在往后根据客户端的业务需求来进行实现. 今天起我们会开始小黄书小程序的实现. 我们先看下小红书应用的主界面. 这一篇文章 ...

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

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

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

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

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

爱疯x 、11pro、max等刘海屏都兼容，最后我测试了一下爱疯5，也是可以的。

最后附上我实现功能时候参考文献

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

最新文章

热门文章

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

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

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

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

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

爱疯x 、11pro、max等刘海屏都兼容，最后我测试了一下爱疯5，也是可以的 。

最后附上我实现功能时候参考文献

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

最新文章

热门文章

爱疯x 、11pro、max等刘海屏都兼容，最后我测试了一下爱疯5，也是可以的。