TitleBar 标题栏
页面顶部的系统标题栏。几乎每页都有,所以它是页面字段,不是 基础 里的积木,也不写在 body 的 type 上。
写在 page.json 根上的 title。不写则不显示。字符串只写标题;对象可改样式,右侧用 right 放文案或图标按钮。入口 window.title 是各页的默认样式,当前页同名字段覆盖它,见 配置。
页内自己画返回栏用 NavBar,需要 title.hidden: true。不要和标题栏叠在一起。页面里的大字标题是 Title。运行时改文案和颜色用 this.setTitle,见 页面事件。工程示例见 pages/titleBar。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text | String | 标题文案,支持 {{path}}(如 {{pageTitle}},对应 Page.data) |
| hidden | Boolean | true 则隐藏标题栏 |
| fontSize | Number | 字号,单位 sp |
| color | String | 文字颜色 |
| background | String | 标题栏背景色 |
| fontWeight | String | bold |
| align | String | left / center / right |
| style | Object | 也可把 fontSize / color 等写在 style 里 |
| right / actions / rightActions | Object / Array | 右侧按钮。单项对象或数组均可,字段见下表 |
right 每一项:
| 参数名 | 类型 | 说明 |
|---|---|---|
| icon / src / image | String | 图标路径(支持 png / svg),与 text 至少写一个 |
| text / title / label | String | 文案按钮;有 icon 时仅作无障碍描述 |
| onTap / onClick | String | 轻触调用的 Page 方法 |
| action | Object | 与组件相同的 JSON action(navigate / toast 等) |
| size | Number | 图标边长 dp,默认 24 |
| color / tint / iconColor | String | 可选着色。彩色 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('添加');
}
});