×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：navigation自定义导航

navigation 自定义导航

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

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、做网站、成都外贸网站建设公司、和平网络推广、成都微信小程序、和平网络营销、和平企业策划、和平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供和平建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

属性说明

属性名 类型 必填 默认值 说明

type

String

否

default

自定义导航类型。default：默认，switchNav：切换导航栏模式。注：切换模式下，常规参数均配置在 commonBar 和 fixedBar 中

backgroundColor

String

否

#fff

导航背景色

frontColor

String

否

#000

前景颜色（目前特指字体颜色）

opacity

Number

否

1

导航背景透明度

navigationStyle

Object

否

{}

导航容器自定义样式（加在行间样式上）

navigationAreaStyle

Object

否

{}

导航内容可视区自定义样式（加在行间样式上）

backIcon

Boolean

否

false

是否显示返回图标

homeIcon

Boolean

否

false

是否显示首页图标

backIconSize

String

否

35.02rpx

返回图标大小

homeIconSize

String

否

35.02rpx

显示首页图标大小

backHdl

EventHandle

否

无

点击返回图标的回调事件

homeHdl

EventHandle

否

无

点击首页图标的回调事件

isFullScreenWidth

Boolean

否

false

宽度是否撑满屏幕

switchStartPosition

Number

否

statusBarHeight
（计算得来的默认状态栏的高度）

切换模式下，导航栏切换的起始位置，默认状态栏的高度

switchEndPosition

Number

否

100

切换模式下，导航栏切换切换结束的位置

commonBar

Object

否

{
‘isFullScreenWidth’: true,
‘opacity’:1,
‘title’:’’,
‘frontColor’:’#000’,
‘bgColor’:’#fff’,
‘backIcon’:true,
‘homeIcon’:false,
‘navigationStyle’:{},
‘navigationAreaStyle’:{}}

切换模式下，初始的导航样式

fixedBar

Object

否

{
‘isFullScreenWidth’: true,
‘opacity’:1,
‘title’:’fixed’,
‘frontColor’:’#000’,
‘bgColor’:’pink’,
‘backIcon’:true,
‘homeIcon’:false,
‘navigationStyle’:{},
‘navigationAreaStyle’:{}}

切换模式下，滚动后的导航样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  backIcon="{{backIcon}}"
    3. 
  
  
  
  3.  homeIcon="{{homeIcon}}"
    4. 
  
  
  
  4.  bindbackHdl="backHandler"
    5. 
  
  
  
  5.  bindhomeHdl="homeHandler"
    6. 
  
  
  
  6. >
    7. 
  
  
  
  7.  顶部标题
    8. 
  
  
  
    9.

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

  • SWAN
  • JS
  • CSS
  • JSON
 
 
 
    
  
  
  
    2. 
  
  
  
  2.  type="switchNav"
    3. 
  
  
  
  3.  commonBar="{{commonBar}}"
    4. 
  
  
  
  4.  fixedBar="{{fixedBar}}"
    5. 
  
  
  
  5.  bindbackHdl="backHandler"
    6. 
  
  
  
  6.  bindhomeHdl="homeHandler"
    7. 
  
  
  
  7.  switchStartPosition="{{1000}}"
    8. 
  
  
  
  8. >
    9. 
  
  
  
    10.

设计指南

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

正确

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

错误

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

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

错误

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

错误

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

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

正确

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

错误

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

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

Bug & Tip

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

名称栏目：创新互联百度小程序教程：navigation自定义导航
分享网址：http://bluegullmedia.com/article/cohgsei.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务

0.0690s