跳到主要内容

顶部导航

适用场景#

用于实现常规的页面顶部导航效果,预置返回首页与返回按钮

基础能力说明#

通过属性栏配置可快速实现页面的顶部导航效果,同时该组件提供了「返回按钮、返回首页按钮」属性,开启后,可直接生成展示相关导航功能

扩展场景说明#

小程序样式兼容要求#

小程序使用时,需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」,否则小程序页面上方会显示出 2 个导航栏,同时导航栏中间会留有不可消除的空白间距

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
导航标题titlestring基础属性"导航标题"设置导航组件的标题文本内容
按钮主题iconTheme{"label":"黑色","value":"black"}|{"label":"白色","value":"white"}基础属性"black"设置导航组件按钮的主题颜色
背景色backgroundColorstring基础属性"rgba(255, 255, 255, 1)"设置导航组件的背景颜色
字体颜色textColorstring基础属性"rgba(0, 0, 0, 1)"设置导航组件的标题文本颜色
标题字号textSizenumber基础属性28设置导航组件的标题字体大小
返回按钮backboolean基础属性true开启后,导航组件会生成返回按钮,可通过事件配置区的back触发条件进行相关事件配置
返回首页按钮homeboolean基础属性true开启后,导航组件会生成首页按钮,可通过事件配置区的home触发条件进行相关事件配置
渲染模式mode"default"|"cover"高级属性"default"default: 默认方式,内容从navbar下渲染。cover: 封面模式,封面模式下APP内容从视窗最顶部渲染

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
返回事件back兼容三端-
返回首页home兼容三端-