• navigation 自定义导航
  • 属性说明
  • 示例
    • 代码示例 1：type 默认为 default（默认模式）
    • 代码示例 2：type默认为switchNav（切换模式）
  • Bug & Tip

navigation 自定义导航

解释：顶部自定义的导航栏，支持配置返回首页、上一页按钮，和滑动切换效果主题。设计文档详见顶部导航栏。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：type 默认为 default（默认模式）

• SWAN
• JS
• CSS
• JSON

 


  
<smt-navigation

  
 backIcon="{{backIcon}}"

  
 homeIcon="{{homeIcon}}"

  
 bindbackHdl="backHandler"

  
 bindhomeHdl="homeHandler"

  
>

  
 <text>顶部标题</text>

  
</smt-navigation>

 

代码示例 2：type默认为switchNav（切换模式）

• SWAN
• JS
• CSS
• JSON

 


  
<smt-navigation

  
 type="switchNav"

  
 commonBar="{{commonBar}}"

  
 fixedBar="{{fixedBar}}"

  
 bindbackHdl="backHandler"

  
 bindhomeHdl="homeHandler"

  
 switchStartPosition="{{1000}}"

  
>

  
</smt-navigation>

 

设计指南

访问小程序首页时，自定义导航栏默认展现右侧菜单与关闭功能。左侧自定义区域可呈现选择城市、搜索框等功能。注意左侧自定义区域内容应与右侧的胶囊水平对齐。技术实现请参考开发文档详见全局配置 。

正确

左侧城市选择功能与右侧胶囊水平对齐。

错误

左侧城市选择功能与右侧胶囊未水平对齐。

访问小程序其他页面（非首页）时，除展现菜单与关闭外，左上角还会展现返回功能，用于返回上一页面，不支持隐藏或调整位置，因此设置自定义功能时请合理避让。自定义功能所需图标，建议使用 Smart UI 官方设计资产，保证图标设计的一致性，技术实现请参考开发文档 icon 图标。

错误

自定义功能避让返回功能，位置合理舒适。

错误

自定义功能未避让返回功能，回首页与返回功能重叠体验欠佳。

自定义配置容器背景（backgroundColor）颜色时，请重点关注信息的可识别性和整体阅读舒适度。状态栏颜色与顶部导航栏颜色一致。

正确

导航栏背景与元素搭配舒适、内容易读性佳。

错误

导航栏背景与元素搭配不舒适、内容易读性差。

顶部导航栏支持上滑变色浏览体验更为沉浸，请注意切换后导航背景颜色配置应注意与页面内容背景颜色一致。

Bug & Tip

• Tip：当swanNativeVersion>=2.28.0时，小程序框架将回收二级页面（非首页 / 非 Tab 页）左上角返回按钮的自定义权限。在小程序二级页面使用自定义导航栏时，小程序框架将提供统一的返回按钮控制方案。详情请参考非兼容性升级。