小程序如何实现自定义标题栏(头部导航栏)

简介: 首先,我们需要了解如何设置标题栏透明:[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]。

首先,我们需要了解如何设置标题栏透明:[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}}状态栏的高度即可。

看看效果吧。

ide:

真机:

目录
相关文章
|
20天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
20天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
3天前
|
小程序 前端开发 数据挖掘
圈子论坛社区交友系统开源版小程序源码,自定义小程序管理社区圈子软件开发,打造受欢迎社交圈
通过获取开源版小程序源码、进行自定义小程序管理社区圈子软件开发以及注重用户体验和功能模块的设计,可以打造一个受欢迎的社交圈。同时,需要不断优化和完善系统,以满足用户不断变化的需求和期望。
16 0
|
5月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
70 0
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
665 1
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
83 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
179 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
254 0
|
5月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
144 0
|
5月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
123 0