需要加载的模块
const navigationBar = app.requireModule('navigationBar');
/**
* @param params 详细参数
* @param callback 点击标题回调事件,result回调内容为params传入参数
*/
navigationBar.setTitle({params}, callback(result))
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
title | String |
√ | 标题 | - |
titleColor | String |
- | 标题字体颜色 | - |
titleSize | Float |
- | 标题字体大小 | 32.0 |
titleBold | Boolean |
- | 标题粗体 | false |
subtitle | String |
- | 副标题 | - |
subtitleColor | String |
- | 副标题字体颜色 | - |
subtitleSize | Float |
- | 副标题字体大小 | 24.0 |
backgroundColor | String |
- | 标题栏背景颜色 | #3EB4FF |
barHeight | Number |
- | 标题栏高度 | - |
/**
* @param params 详细参数
* @param callback 点击按钮回调事件,result回调内容为params传入参数
*/
navigationBar.setLeftItem({params}, callback(result))
params 参数说明
属性名 | 类型 | 必须 | 描述 | 默认值 |
---|---|---|---|---|
title | String |
- | 按钮标题(与图标必须一) | - |
titleColor | String |
- | 按钮标题字体颜色 | - |
titleSize | Float |
- | 按钮标题字体大小 | 28.0 |
titleBold | Boolean |
- | 按钮标题粗体 | false |
icon | String |
- | 按钮图标,注① | - |
iconColor | String |
- | 按钮图标字体颜色 | - |
iconSize | Float |
- | 按钮图标字体大小(图标大小) | 28.0 |
width | Number |
- | 按钮宽度,留空自适应 | - |
spacing | Number |
- | 按钮标题与按钮图标间距 | 10 |
注①:
md-add
、ios-cube
,更多图标代码详见pmui所有图标。https://pmui.app/app/demo.png
,此时不支持iconColor
参数。简单示例
//示例: 纯文字
navigationBar.setLeftItem({
title: '按钮1',
}, function(result) {
//....
});
综合示例
<template>
<div class="app">
<text class="text">pmui 菜单栏演示</text>
</div>
</template>
<script>
const pmui = app.requireModule('pmui');
const navigationBar = app.requireModule('navigationBar');
export default {
mounted() {
//示例: 图标+文字
navigationBar.setLeftItem({
icon: 'tb-back',
title: '返回',
width: 120,
}, function(result) {
pmui.closePage();
});
//示例: 多个按钮模式
navigationBar.setRightItem([{
icon: 'md-help-circle-outline',
iconSize: 32,
title: '按钮1',
}, {
title: '按钮2',
width: 120,
}], function(result) {
pmui.alert("点击按钮:" + result.title);
});
},
}
</script>
<style scoped>
.app {
flex: 1;
justify-content: center;
align-items: center;
}
.text {
font-size: 24px;
}
</style>
navigationBar.setLeftItem
。navigationBar.setTitle
方法时自动显示标题栏。