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

上一期咱们了解了 小程序底部导航栏 的完成作用，今天一起来了解下怎么设置小程序标题栏～

根底标题栏

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

别的 IDE上无法展示保藏按钮，假如测试保藏按钮的相关功能 需求运用真机形式调试。

1、根底特点

咱们能够在 app.json 中标题栏的根底特点进行设置，常用的特点如下：

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

app.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
• 当时页面导航栏布景色无设置的情况下会沿袭上级页面的装备

关于导航栏标题装备可能遇到的问题能够参阅下面的文档：

• [装备导航栏图片地址]
• [修正顶部导航栏布景色]
• [小程序标题怎么在标题栏居中显示]
• [怎么设置导航栏布景渐变色]
• [蒙层能否遮住小程序导航栏和 tabBar]

2、动态款式修正

假如需求对标题的款式进行动态修正，能够通过 my.setNavigationBar 办法完成：

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

别的，要留意的是，假如跳转到非 tab /首页的情况且页面栈深度为 1，页面上会呈现 home 图标，如下图：

此时咱们能够运用 my.hideBackHome 办法进行躲藏

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

小贴士：

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

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

• [回来按钮是否可躲藏]
• [导航栏怎么设置前景色，回来按钮色彩和标题色彩]

自定义标题栏

由于根底标题许多的特点都无法修正，假如需求标题居中、设置查找框等操作的话，就需求用到自定义标题栏了。

1、特点装备

首先，自定义标题栏需求在对应页面的 .json 文件中装备以下特点：

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

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

none 作用：

always 作用：

auto 作用：向下拉时会逐步通明

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

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

首要是获取标题栏（titleBarHeight）、状态栏（statusBarHeight）以及回来按钮右边的间隔（right）。

获取标题栏方位：

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文件不支持动态装备。

<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 代码：

.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标题色彩不一致]
• [怎么获取标题栏高度以及状态栏高度]
• [小程序导航栏标题设置空后无法触发点击事件]

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