小程序开发实战案例四 | 小程序标题栏如何设置
上一期我们了解了 小程序底部导航栏 的实现效果，今天一起来了解下如何设置小程序标题栏～
基础标题栏
小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块，其中能够调整的部分只有标题和背景色。
另外 IDE 上无法展示收藏按钮，如果测试收藏按钮的相关功能 需要使用真机模式调试。
1、基础属性
📌 我们可以在 app.json 中标题栏的基础属性进行设置，常用的属性如下：
defaultTitle ：页面标题
titleBarColor ：导航栏背景色
titleImage ：图片标题
app.json（对所有页面生效）
这里分别举例说明「文字标题」和「图片标题」对应的效果：
文字标题效果：
图片标题效果：
⚠ 注意：
titleImage 优先级 > defaultTitle
如果在页面的 json 文件中配置，仅对当前页面生效
页面配置优先级 > app.json
当前页面导航栏背景色无设置的情况下会沿用上级页面的配置
关于导航栏标题配置可能遇到的问题可以参考下面的文档：
2、动态样式修改
如果需要对标题的样式进行动态修改，可以通过 my.setNavigationBar 方法实现：
另外，要注意的是，如果跳转到非 tab /首页的情况且页面栈深度为 1，页面上会出现 home 图标，如下图：
此时我们可以使用 my.hideBackHome 方法进行隐藏
📖 小贴士：
建议在页面 onShow 时调用该方法，避免有闪烁或不生效。
除了 home 图标外，其他的按钮都无法隐藏/去除。
这边汇总了一些关于动态样式修改的问题：
自定义标题栏
因为基础标题很多的属性都无法修改，如果需要标题居中、设置搜索框等操作的话，就需要用到自定义标题栏了。
1、属性配置
首先，自定义标题栏需要在对应页面的 .json 文件中配置以下属性：
transparentTitle：标题栏透明设置，支持设置 none / always / auto
titlePenetrate：是否允许标题栏点击穿透点击后方元素
none 效果：
always 效果：
auto 效果：向下拉时会逐渐透明
2、编写自定义标题栏代码
透明设置完成后，为了不跟返回按钮以及胶囊的位置冲突，我们需要获取到对应的位置信息，根据位置来确定自定义的模块的位置。
主要是获取标题栏（titleBarHeight）、状态栏（statusBarHeight）以及返回按钮右边的距离（right）。
获取标题栏位置：
在 style 中设置自定义标题栏高度：
需要注意的是，只能在 style 进行动态配置，.css 文件不支持动态配置。
.acss 代码：
实现效果：
自定义导航栏的常见问题汇总在这里了，大家可以参考下~：
以上就是关于【小程序标题栏设置】的所有内容了，希望对你有所帮助*★,°*:.☆(￣▽￣)/$:*.°★* 。
还未添加个人签名 2023-10-17 加入
还未添加个人简介
评论