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

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

真机:

目录
相关文章
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
491 1
|
5月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
61 0
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
65 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
143 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
6月前
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
228 0
|
5月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
131 0
|
5月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
104 0
|
5月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
144 0
|
5月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
608 0