设置小程序标题栏透明介绍 -凯发app官方网站

支付宝小程序

案例分析

小程序开发前准备

小程序api&组件示例

关注&跳转生活号组件使用说明

小程序page页面中父组件&子组件相互传值调用方法

sjs中getregexp正则表达式函数介绍

小程序地区单选&多项选择场景能力

小程序缓存介绍

服务器端各语言实现手机号&运动步数-aes密文解密

小程序前端实现图片转换base64图片数据

小程序前端中如何实现领取优惠券（消费红包）

小程序打开扫一扫&红包&爱攒油&小程序快报生活号&蚂蚁森林&蚂蚁庄园&股票详情页&付款码等官方业务

小程序模板订购链路介绍

模板小程序发布服务市场发布信息介绍

商家订购小程序获取&推进订单状态和终止订单服务说明

ide开发工具常用快捷键

字符串转换hex string（十六进制字符串）

template_not_have_host

msg_send_error

sdk & demo下载

常见问题

常用工具

iot小程序

运维保障

小程序 > 支付宝小程序 > 案例分析 > 设置小程序标题栏透明介绍

更新时间：2022-12-02 17:04:57

贡献者

我的文档

设置

自行实现小程序标题栏透明

示例图

示例代码

在代码里面进行以下设置即可实现上文效果。

在 app.json 中统一设置 transparenttitle: 'none'，"titlepenetrate":"no"，分别是设置全局标题栏不透明和标题栏不穿透属性。

{

"window": {

"transparenttitle": "none" ,

"titlepenetrate":"no",

} }

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

transparenttitle 取值效果说明

transparenttitle 取值为 auto 或 always 时效果不同。

transparenttitle 取值为 auto 时，页面上滑导航栏背景会有渐变效果；transparenttitle 值为 always，保持导航栏原本的颜色，不会渐变。

正常的不滑动下的效果图

取值 auto

transparenttitle 取值为 auto，可以看到导航栏是有渐变效果的。

注意

：

该效果为

滑动页面之后的效果。

取值 always

transparenttitle 值为 always，导航栏保持原有的样式，不会渐变。

实现自定义标题栏

除却

自行实现小程序标题栏透明

之外，其它效果的实现方式如下。

●

获取当前手机系统的导航栏和状态栏高度。页面标题栏透明后，页面的组件元素都会向上顶到状态栏里，所以需要获取状态栏高度和标题栏的高度，标题栏高度就是自定义标题栏的高度，状态栏高度则是标题栏上外边距，先在 page.js 中调用

my.getsysteminfo

来获取状态栏和标题栏高度，再将 this.setdata 赋值到 data 里。

具体使用可查看

获取导航栏以及状态栏高度

。

●

在 axml 页面设置标题栏和状态栏 view 标签，建议放在 axml 页面顶层。

○

设置布局一定用行内样式 style（外部样式 .css 不能设置变量参数），才能动态取到标题栏和状态栏的高度，从而适配各种机型（不同机型可能状态栏高度不同）。

○

最外层 view 设置宽度 width=750rpx，然后用 flex 弹性布局来实现的水平和垂直居中，弹性布局里就需要用行级标签，所以文本使用 block 标签（标题不一定是文本，也可以放图片、icon 等）。

○

position:fix 固定位置距离 top:{{statusbarheight}} 状态栏的高度即可。

●

实现 view 标签的点击事件，则在页面的 page.json 中设置标题栏穿透（前面步骤已经设置）。实现点击标题，触发标题栏下面 view 对应的点击事件。

上一篇：用户信息申请入口不显示下一篇：小程序实现加入购物车抛物线效果

相关问题