顶部导航
#
适用场景用于实现常规的页面顶部导航效果,预置返回首页与返回按钮
#
基础能力说明通过属性栏配置可快速实现页面的顶部导航效果,同时该组件提供了「返回按钮、返回首页按钮」属性,开启后,可直接生成展示相关导航功能
#
扩展场景说明#
小程序样式兼容要求小程序使用时,需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」,否则小程序页面上方会显示出 2 个导航栏,同时导航栏中间会留有不可消除的空白间距
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
导航标题 | title | string | 基础属性 | "导航标题" | 设置导航组件的标题文本内容 |
按钮主题 | iconTheme | {"label":"黑色","value":"black"}|{"label":"白色","value":"white"} | 基础属性 | "black" | 设置导航组件按钮的主题颜色 |
背景色 | backgroundColor | string | 基础属性 | "rgba(255, 255, 255, 1)" | 设置导航组件的背景颜色 |
字体颜色 | textColor | string | 基础属性 | "rgba(0, 0, 0, 1)" | 设置导航组件的标题文本颜色 |
标题字号 | textSize | number | 基础属性 | 28 | 设置导航组件的标题字体大小 |
返回按钮 | back | boolean | 基础属性 | true | 开启后,导航组件会生成返回按钮,可通过事件配置区的back触发条件进行相关事件配置 |
返回首页按钮 | home | boolean | 基础属性 | true | 开启后,导航组件会生成首页按钮,可通过事件配置区的home触发条件进行相关事件配置 |
渲染模式 | mode | "default"|"cover" | 高级属性 | "default" | default: 默认方式,内容从navbar下渲染。cover: 封面模式,封面模式下APP内容从视窗最顶部渲染 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
返回事件 | back | 兼容三端 | - | |
返回首页 | home | 兼容三端 | - |