navigationBar

来自于:官方

open close hide show config

概述

本模块用来以原生方式实现应用中常用的导航条功能. 配合 apicloud 平台的 frameGroup 功能( api.openFrameGroup )与 tabBar 模块可实现复杂内容的优雅导航和展示

navigationBar - 图1

本模块已停止更新,建议开发者使用 NVNavigationBar

open

打开

open({params}, callback(ret, err))

params

x:

  • 类型:数字
  • 描述:(可选项)导航条横坐标
  • 默认值:0

y:

  • 类型:数字
  • 描述:(可选项)导航条纵坐标
  • 默认值:0

w:

  • 类型:数字
  • 描述:(可选项)导航条宽度
  • 默认值:当前frame宽度.默认值,仅在style参数为’left_to_right’时有效

h:

  • 类型:数字
  • 描述:(可选项)导航条高度
  • 默认值:当前frame高度.默认值,仅在style参数为’up_to_down ‘时有效

selectedLine:

  • 类型:JSON对象
  • 描述:(可选项)选中下划线设置
  1. {
  2. color : '#FFF', // 字符串;下划线的颜色
  3. width 3, // 数字;下划线的宽度
  4. marginLR 8, // 数字;相对于整个item左右边距
  5. }

showScrollIndicator:

  • 类型:布尔
  • 描述:是否显示可滚动指示器(滑动箭头)
  • 默认值:false

itemTextPaddingLR:

  • 类型:数字类型
  • 描述:(可选项)item 文本的左右边距
  • 默认:0

style:

  • 类型:字符串
  • 描述:(可选项)导航条风格
  • 默认值:’left_to_right’
  • 取值范围:
    • left_to_right :item从左到右排列
    • up_to_down :item从上到下排列

items:

  • 类型:数组
  • 描述:按钮项
  • 内部字段:
  1. [{
  2. title: // 标题.字符串类型.不可为空
  3. titleSelected: // 选中后的标题.字符串.默认与title相同.可为空.
  4. bg: // 背景,支持 rgb,rgba,# , img. 字符串,默认#696969,可为空
  5. bgSelected: // 选中后背景,支持 rgb,rgba,# , img.字符串.默认与bg相同.可为空.
  6. alpha: // 背景透明度. 数字.取值范围0-1,默认1,可为空
  7. }]

selectedIndex:

  • 类型:数字
  • 描述:(可选项)被选中的导航项的下标,不传表示不选中任何item

font:

  • 类型:JSON 对象
  • 默认值:与系统设置相同
  • 描述:导航项字体的大小和颜色
  • 内部字段:
  1. {
  2. size: 14, //(可选项)数字类型;导航项字体大小;默认:14
  3. sizeSelected: 14, //(可选项)数字类型;选中时导航项字体大小;默认:14
  4. color: '#FFFFFF', //(可选项)字符串类型;导航条字体颜色,支持rgb、rgba、#;默认:#FFFFFF
  5. colorSelected: '#FFFFFF', //(可选项)字符串类型;选中时导航条字体颜色,支持rgb、rgba、#;默认:#FFFFFF
  6. alpha: 1, //(可选项)数字类型;背景透明度,取值范围:0-1;默认:1
  7. ttf:'Alkatip Basma Tom', //(可选项)字符串类型;默认值:当前系统字体;
  8. 本参数在 iOS 平台上表示字体名称 (必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1),并在 widget 包内包含该 ttf 文件);
  9. 本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
  10. }

bg:

  • 类型:字符串
  • 描述:(可选项)导航条背景,支持 rgb、rgba、#、img
  • 默认值:#6b6b6b

alpha:

  • 类型:数字
  • 描述:背景透明度.取值范围0-1
  • 默认值:1.0.

itemSize:

  • 类型:JSON 对象
  • 描述:(可选项)单个导航项的宽度和高度
  • 内部字段:
  1. {
  2. w:// 单个导航项的宽度.数字.默认为导航条宽度/导航项个数. 可不传.仅在导航条style参数为 'left_to_right'时有效.
  3. h:// 单个导航项的高度.数字.默认为导航条高度/导航项个数.可不传.仅在导航条style参数为 'up_to_down'时有效.
  4. }

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:是否将模块视图固定到窗口上,不跟随窗口上下滚动
  • 默认值:true

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 描述:包含被点击的导航项的相关信息
  • 内部字段:
  1. {
  2. eventType: 'show', //字符串类型;交互事件类型,取值范围如下:
  3. //show:模块打开成功并显示
  4. //click:用户点击按钮事件
  5. //config:调用config触发点击按钮事件
  6. id: , //数字类型;导航条对象唯一标识
  7. index: //数字类型;导航项下标,当点击 pop按钮时,此值为-1.
  8. }

err:

  • 类型:JSON 对象
  • 描述:发生错误时,返回此对象
  • 内部字段:
  1. {
  2. msg: // 错误信息.
  3. }

示例代码

  1. var navigationBar = api.require('navigationBar');
  2. navigationBar.open({
  3. y: 0,
  4. w: api.frameWidth,
  5. h: 42,
  6. itemSize: {
  7. w: 150
  8. },
  9. items: [{
  10. title: '标题一',
  11. bg: '#ffff00',
  12. bgSelected: '#ff0000'
  13. }, {
  14. title: '标题二',
  15. bg: '#ffff00',
  16. bgSelected: '#ff0000'
  17. }, {
  18. title: '标题三',
  19. bg: '#ffff00',
  20. bgSelected: '#ff0000'
  21. }, {
  22. title: '标题四',
  23. bg: '#ffff00',
  24. bgSelected: '#ff0000'
  25. }, {
  26. title: '标题五',
  27. bg: '#ffff00',
  28. bgSelected: '#ff0000'
  29. }],
  30. font: {
  31. color: '#333'
  32. },
  33. fixedOn: api.frameName,
  34. showScrollIndicator:true
  35. }, function(ret, err) {
  36. if (ret) {
  37. alert(JSON.stringify(ret));
  38. } else {
  39. alert(JSON.stringify(err));
  40. }
  41. });

补充说明

  • 当导航项过多时,每次点击或模拟导航项,都会使被选中的导航项,居中显示在导航条中.
  • 可以在同一页面操作多个导航条对象.
  • open方法的回调会在以下三种情况下触发:
  1. a.模块第一次打开.
  2. b.用户点击了导航条的按钮.
  3. c.selectedIndex参数发生变化.如通过config方法设置selectedIndex参数的值.

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭

close({params})

params

id:

  • 类型:数字
  • 默认值:无
  • 描述:如果当前页面存在且仅存在一个导航条对象,则默认操作此对象.此时参数可为空

示例代码

  1. var navigationBar = api.require('navigationBar');
  2. navigationBar.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide({params})

params

id:

  • 类型:数字
  • 描述:操作对象的id

示例代码

  1. var navigationBar = api.require('navigationBar');
  2. navigationBar.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示

show({params})

params

id:

类型:数字 描述:操作对象的id

示例代码

  1. var navigationBar = api.require('navigationBar');
  2. navigationBar.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

config

设置或获取模块配置的值

config({params}, callback(ret, err))

params

id:

  • 类型:数字
  • 描述:操作对象的id

key:

  • 类型:字符串
  • 描述:要配置的参数名称.可选范围: open方法中传入的 params 的某一字段.可选字段: x, y, w, h, selectedIndex,bg, alpha

value:

  • 类型:混合类型.应与key期望的类型一致
  • 描述:要配置的模块的值.不传此参数,则可以直接获取当前配置的值

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 描述:设置属性成功时返回
  • 内部字段:
  1. {
  2. key: // 字符串. 参数名称.
  3. oldValue: // 混合类型,与参数期望的值类型一致. 配置的原值.
  4. newValue: // 混合类型. 配置的新值.当为获取配置的操作时,与oldValue相同.
  5. }

err:

  • 类型:JSON 对象
  • 描述:配置模块参数失败时返回的错误信息
  • 内部字段:
  1. {
  2. msg: // 错误信息
  3. }

示例代码

  1. var navigationBar = api.require('navigationBar');
  2. navigationBar.config({
  3. key: 'y'
  4. }, function(ret, err) {
  5. if (ret) {
  6. alert(JSON.stringify(ret));
  7. } else {
  8. alert(JSON.stringify(err));
  9. }
  10. });

补充说明

  • 此函数传入的回调方法,默认只在设置或获取到参数值时,执行且仅执行一次.
  • 当key 为selectedIndex时,会执行两个回调:一个是由config传入的回调,一个是在open方法中传入的回调.

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本