小程序开发实战案例四 | 小程序标题栏如何设置

上一期我们了解了小程序底部导航栏的实现效果，今天一起来了解下如何设置小程序标题栏～

基础标题栏

小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块，其中能够调整的部分只有标题和背景色。

另外 IDE上无法展示收藏按钮 ，如果测试收藏按钮的相关功能 需要使用真机模式调试。

1、基础属性

📌 我们可以在 app.json 中标题栏的基础属性进行设置，常用的属性如下：

defaultTitle ：页面标题
titleBarColor ：导航栏背景色
titleImage ：图片标题

app.json（对所有页面生效）

这里分别举例说明「文字标题」和「图片标题」对应的效果：

json 复制代码

"window": {
    "defaultTitle": "购物商城",
    "titleBarColor":"#ff4343",
    "titleImage":"https://img2.baidu.com/it/u=417873769,1232851485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  },

文字标题效果：

图片标题效果：

⚠ 注意：

titleImage 优先级 > defaultTitle
如果在页面的 json 文件中配置，仅对当前页面生效
页面配置优先级 > app.json
当前页面导航栏背景色无设置的情况下会沿用上级页面的配置

关于导航栏标题配置可能遇到的问题可以参考下面的文档：

$[配置导航栏图片地址](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Ff8bf0cb5-35c5-40de-8fb5-17ca54f10b31 "https://opensupport.alipay.com/support/FAQ/f8bf0cb5-35c5-40de-8fb5-17ca54f10b31")$
$[修改顶部导航栏背景色](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F89b9627a-3d56-4873-85e3-786698325cce "https://opensupport.alipay.com/support/FAQ/89b9627a-3d56-4873-85e3-786698325cce")$
$[小程序标题如何在标题栏居中显示](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F69f41f2a-e83a-4d9d-92ef-9c4906bef613 "https://opensupport.alipay.com/support/FAQ/69f41f2a-e83a-4d9d-92ef-9c4906bef613")$
$[如何设置导航栏背景渐变色](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F639a37e2-1d16-4288-a97a-113faf2d3b6f "https://opensupport.alipay.com/support/FAQ/639a37e2-1d16-4288-a97a-113faf2d3b6f")$
$[蒙层能否遮住小程序导航栏和 tabBar](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Feaf8d3d1-8f4a-4109-b833-5badcb4f6206 "https://opensupport.alipay.com/support/FAQ/eaf8d3d1-8f4a-4109-b833-5badcb4f6206")$

2、动态样式修改

如果需要对标题的样式进行动态修改，可以通过 my.setNavigationBar 方法实现：

php 复制代码

// 设置导航栏前景色。注：frontColor 需要和 backgroundColor 一起设置
my.setNavigationBar({
  frontColor: '#ffffff',
  backgroundColor: '#ff0000',
})
// 设置导航栏标题
my.setNavigationBar({
  title: '当前标题'
})
// 重置导航栏颜色为默认配色
my.setNavigationBar({
  reset: true
})

另外，要注意的是，如果跳转到非 tab /首页的情况且页面栈深度为 1，页面上会出现 home 图标，如下图：

此时我们可以使用 my.hideBackHome 方法进行隐藏

scss 复制代码

Page({
  onShow() {
     if(getCurrentPages().length == 1){//判断页面栈深度
        my.hideBackHome();
    }
  },
});

📖 小贴士：

建议在页面 onShow 时调用该方法，避免有闪烁或不生效。
除了 home 图标外，其他的按钮都无法隐藏/去除。

这边汇总了一些关于动态样式修改的问题：

$[返回按钮是否可隐藏](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F60464182-759a-48b2-85b4-a2e61f46733b "https://opensupport.alipay.com/support/FAQ/60464182-759a-48b2-85b4-a2e61f46733b")$
$[导航栏如何设置前景色，返回按钮颜色和标题颜色](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Ff0a08ea7-70b3-4c56-812f-b91c46a0f9e6 "https://opensupport.alipay.com/support/FAQ/f0a08ea7-70b3-4c56-812f-b91c46a0f9e6")$

自定义标题栏

因为基础标题很多的属性都无法修改，如果需要标题居中、设置搜索框等操作的话，就需要用到自定义标题栏了。

1、属性配置

首先，自定义标题栏需要在对应页面的 .json 文件中配置以下属性：

transparentTitle：标题栏透明设置，支持设置 none / always / auto
titlePenetrate：是否允许标题栏点击穿透点击后方元素

json 复制代码

"window": {
    "defaultTitle": "购物商城",
    "transparentTitle":"always",
    "titlePenetrate":"YES"
    
  }

none 效果：

always 效果：

auto 效果：向下拉时会逐渐透明

2、编写自定义标题栏代码

透明设置完成后，为了不跟返回按钮以及胶囊的位置冲突，我们需要获取到对应的位置信息，根据位置来确定自定义的模块的位置。

主要是获取标题栏（titleBarHeight）、状态栏（statusBarHeight）以及返回按钮右边的距离（right）。

获取标题栏位置：

javascript 复制代码

Page({
  data: {
    titleBarHeight: 0,//标题栏高度
    statusBarHeight: 0,//状态栏高度
    right: 0,//返回按钮右边距离
  },
  onLoad(options) {
    const {
      titleBarHeight,
      statusBarHeight,
    } = my.getSystemInfoSync();
    this.setData({
      titleBarHeight,
      statusBarHeight,  
    });

    const{
      backButtonIcon,
    } = my.getLeftButtonsBoundingClientRect();
    this.setData({
      right:backButtonIcon.right
    });
  },
  //点击手机标题栏触发的事件,需要在 index.json 配置 titlePenetrate:"YES"
  onTitleBar(e) {
    my.alert({
      title: '点击了标题栏'
    });
  }
});

在 style 中设置自定义标题栏高度：

需要注意的是，只能在 style 进行动态配置，.css文件不支持动态配置。

ini 复制代码

<view class="custom-nav" style="height:{{titleBarHeight + statusBarHeight}}px">
  <view class="custom-titleBar" 
        style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px;padding-left:{{right}}px"
        onTap="onTitleBar" >
    hi，我是自定义标题~
  </view>
</view>

.acss 代码：

css 复制代码

.custom-nav {
  background-image: linear-gradient(to bottom, #BC3985, #D15B2C);
}

.custom-titleBar {
  display: flex;
  align-items: center;
  color: white;
  font-size: 16px;
  margin-left: 16px;
}

实现效果：

自定义导航栏的常见问题汇总在这里了，大家可以参考下~：

$[导航栏设置透明后iOS和Android标题颜色不一致](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fc0e38ddc-2a1c-446c-99c6-95e50e418d3e "https://opensupport.alipay.com/support/FAQ/c0e38ddc-2a1c-446c-99c6-95e50e418d3e")$
$[如何获取标题栏高度以及状态栏高度](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F4dea0833-69e2-4a34-954e-916a45a886bf "https://opensupport.alipay.com/support/FAQ/4dea0833-69e2-4a34-954e-916a45a886bf")$
$[小程序导航栏标题设置空后无法触发点击事件](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fb1342c24-f4bc-43c6-8165-6a4f60146021 "https://opensupport.alipay.com/support/FAQ/b1342c24-f4bc-43c6-8165-6a4f60146021")$

以上就是关于【小程序标题栏设置】的所有内容了，希望对你有所帮助*★,°* :.☆(￣▽￣)/$:.°★ 。