navigationBar

导航标题栏

需要加载的模块

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-addios-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方法时自动显示标题栏。
  • 手动隐藏标题栏。