云南昆明网站制作公司

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

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

    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（默认模式）

    • SWAN
    • JS
    • CSS
    • JSON
     
 
 
      
  
  
  
      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自定义导航
    标题URL：http://kmvly.com/article/cohgsei.html

    其他资讯