Skip to content

TitleBar 标题栏 ​

页面顶部的系统标题栏。几乎每页都有,所以它是页面字段,不是 基础 里的积木,也不写在 body 的 type 上。

写在 page.json 根上的 title。不写则不显示。字符串只写标题;对象可改样式,右侧用 right 放文案或图标按钮。入口 window.title 是各页的默认样式,当前页同名字段覆盖它,见 配置。

页内自己画返回栏用 NavBar,需要 title.hidden: true。不要和标题栏叠在一起。页面里的大字标题是 Title。运行时改文案和颜色用 this.setTitle,见 页面事件。工程示例见 pages/titleBar。

参数名类型说明
textString标题文案,支持 {{path}}(如 {{pageTitle}},对应 Page.data)
hiddenBooleantrue 则隐藏标题栏
fontSizeNumber字号,单位 sp
colorString文字颜色
backgroundString标题栏背景色
fontWeightStringbold
alignStringleft / center / right
styleObject也可把 fontSize / color 等写在 style 里
right / actions / rightActionsObject / Array右侧按钮。单项对象或数组均可,字段见下表

right 每一项:

参数名类型说明
icon / src / imageString图标路径(支持 png / svg),与 text 至少写一个
text / title / labelString文案按钮;有 icon 时仅作无障碍描述
onTap / onClickString轻触调用的 Page 方法
actionObject与组件相同的 JSON action(navigate / toast 等)
sizeNumber图标边长 dp,默认 24
color / tint / iconColorString可选着色。彩色 SVG(如自带底色的加号)一般不必写
json
{
  "title": {
    "text": "{{pageTitle}}",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  }
}
json
{
  "title": {
    "text": "话术",
    "fontSize": 17,
    "color": "#FFFFFF",
    "background": "#0B6E6A",
    "right": [
      { "text": "分享", "onTap": "onShare" },
      { "icon": "img/add.svg", "text": "添加", "onTap": "onAdd" }
    ]
  }
}
json
{ "title": { "text": "关于", "hidden": true } }

右侧同时放文案和图标时,page.js 用对应方法改数据:

javascript
Page({
  data: { hint: '还没有点击右侧按钮' },
  onShare() {
    this.setData({ hint: '已点「分享」' });
    System.toast('分享');
  },
  onAdd() {
    this.setData({ hint: '已点「添加」' });
    System.toast('添加');
  }
});