NVTabBarAnimation

来自于:APICloud立即使用

open hide show close setBadge setItemAttr bringToFront

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

NVTabBarAnimation 是一个底部导航条模块,该模块依附于当前主 window 。开发者可通过相应接口参数自定义其样式,设置、取消选中状态,动态配置 item 的徽章(badge)等功能。相比较NVTabbar,本模块增加了动态icon(类似gif图的动画)的展示和动态、静态切换功能,开发者可在模块初始化或之后调用相应接口进行设置。

open

打开模块并显示

open({params}, callback(ret))

params

styles:

  • 类型:JSON 对象
  • 描述:模块样式配置
  • 默认值:见内部字段
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;模块背景,支持 rgb、rgba、#、img;默认:#ffffff
  3. h: 50 , //(可选项)数字类型;模块的高度(含分割线);默认:50
  4. dividingLine: { //(可选项)JSON对象;模块顶部的分割线配置
  5. width: 0.5, //(可选项)数字类型;分割线粗细;默认:0.5
  6. color: '#000' //(可选项)字符串类型;分割线颜色;默认:#000
  7. },
  8. badge: { //(可选项)JSON对象;徽章样式配置;若不传则去内部字段默认值
  9. bgColor: '#ff0', //(可选项)字符串类型;徽章背景色,支持rgb、rgba、#;默认:#ff0
  10. numColor: '#fff',//(可选项)字符串类型;徽章数字字体颜色,支持rgb、rgba、#;默认:#fff
  11. size: 6.0, //(可选项)数字类型;徽章半径大小;默认值:6.0
  12. centerX: 6.0, //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
  13. centerY: 6.0 //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
  14. }
  15. }

items:

  • 类型:数组
  • 描述:导航条子项配置,子项条数不能超过 5
  • 内部字段:
  1. [{
  2. w: api.winWidth/5.0, //(可选项)数字类型;子项的宽度(识别点击事件的区域宽度);默认:api.winWidth/items子项总数
  3. bg: { //(可选项)JSON对象;子项背景配置,若不传则取内部字段默认值
  4. marginB: 0, //(可选项)数字类型;子项背景距离模块底部的距离,设置大于0的数字可实现凸起效果;默认:0
  5. image: 'rgba(0,0,0,0)',//(可选项)字符串类型;子项的背景,支持rgb、rgba、#、img(仅支持本地图片路径fs://、widget://);默认:rgba(0,0,0,0)
  6. },
  7. icon: { // JSON对象;子项按钮静态图标配置,值为空则不显示图标
  8. normal: '', // 字符串类型;子项按钮常态下的背景图片路径,要求本地路径(fs://、widget://)
  9. highlight: '', //(可选项)字符串类型;子项按钮高亮态下的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无按钮高亮效果
  10. selected: '', //(可选项)字符串类型;子项按钮按钮选中后的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无选中后效果
  11. rect: { //(可选项)JSON对象;子项按钮图标的大小配置,位置居中显示;值为空则不显示图标
  12. w: 25.0, //(可选项)数字类型;子项按钮图标的宽度;默认:25.0
  13. h: 25.0, //(可选项)数字类型;子项按钮图标的高度;默认:25.0
  14. x:0, //(可选项)数字类型:子项按钮图标左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
  15. y:0, //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值为0
  16. },
  17. },
  18. animationIcons: { // JSON对象;子项按钮动态图标(动画)配置,值为空则不显示动态图标
  19. // 注意:本动画状态不受按钮点击事件影响,即无论按钮未选择状态还是选择状态,本动画图标均不做改变。动画的显示、隐藏、改变内部动画图片路径等属性改变,需开发者自行调用item属性设置接口。
  20. paths: ['','',''], // 数组对象;组成动态动画的静态图片路径数组。图片路径要求本地路径(fs://、widget://)
  21. rect: { //(可选项)JSON对象;子项按钮动态图标的大小配置,位置居中显示;值为空则不显示图标
  22. w: 25.0, //(可选项)数字类型;子项按钮图标的宽度;默认:25.0
  23. h: 25.0, //(可选项)数字类型;子项按钮图标的高度;默认:25.0
  24. x:0, //(可选项)数字类型:子项按钮图标左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
  25. y:0 //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值:0
  26. },
  27. interval:100 //动画的静态图片切换间隔时间,单位ms,默认:100
  28. },
  29. title: { //(可选项)JSON对象;子项标题配置,值为空则不显示标题文字
  30. text: '', //(可选项)字符串类型;子项按钮下面的标题文字,若不传或传空则不显示
  31. size: 12.0, //(可选项)数字类型;子项标题文字大小;默认:12.0
  32. normal: '#696969', //(可选项)字符串类型;子项标题文字常态颜色;默认:#696969
  33. selected: '#ff0', //(可选项)字符串类型;子项标题文字选中后颜色;默认:#ff0
  34. marginB: 6.0, //(可选项)数字类型;子项标题距离模块下边缘的距离;默认:6.0
  35. ttf:'Alkatip Basma Tom'//(可选项)字符串类型;默认值:当前系统字体;
  36. 本参数在 iOS 平台上表示字体名称 (必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1),并在 widget 包内包含该 ttf 文件);
  37. 本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
  38. },
  39. rect: { //(可选项)JSON对象;子项按钮标题的大小配置,位置水平居中显示;默认值见内部字段
  40. w: api.winWidth/items, //(可选项)数字类型;子项按钮图标的宽度;默认:整个item宽度
  41. x:0, //(可选项)数字类型:子项按钮标题左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
  42. y:0, //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值:0
  43. },
  44. }]

selectedIndex:

  • 类型:数字
  • 描述:(可选项)默认值为选中状态的按钮的索引,若不传则默认无选中项

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'show', //字符串类型;交互事件类型,取值范围如下:
  3. //show:打开模块并显示事件
  4. //click:用户点击模块内子按钮事件
  5. index:0 //数字类型;用户点击按钮的索引,仅当 eventType 为 click 时有值
  6. }

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.open({
  3. styles: {
  4. bg: '#fff',
  5. h: 58,
  6. dividingLine: {
  7. width: 0.5,
  8. color: '#ccc'
  9. },
  10. badge: {
  11. bgColor: '#f45815',
  12. numColor: '#fff',
  13. size: 7.0
  14. }
  15. },
  16. items: [{
  17. w: api.winWidth / 5.0,
  18. bg: {
  19. marginB: 0,
  20. image: 'rgba(0,0,0,0)',
  21. },
  22. icon: {
  23. normal: 'widget://res/NVTabBarAnimation/1.png',
  24. highlight: 'widget://res/NVTabBarAnimation/11.png',
  25. rect: {
  26. w: 25.0,
  27. h: 25.0,
  28. x: 0,
  29. y: 0,
  30. },
  31. },
  32. animationIcons: {
  33. paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  34. rect: {
  35. w: 25.0,
  36. h: 25.0,
  37. x: 0,
  38. y: 0
  39. },
  40. interval: 300
  41. },
  42. title: {
  43. text: '首页',
  44. size: 12.0,
  45. normal: '#696969',
  46. selected: '#ff0',
  47. marginB: 6.0,
  48. ttf: 'Alkatip Basma Tom'
  49. },
  50. rect: {
  51. w: api.winWidth / 5.0,
  52. x: 0,
  53. y: 0,
  54. },
  55. }, {
  56. w: api.winWidth / 5.0,
  57. bg: {
  58. marginB: 0,
  59. image: 'rgba(0,0,0,0)',
  60. },
  61. icon: {
  62. normal: 'widget://res/NVTabBarAnimation/2.png',
  63. highlight: 'widget://res/NVTabBarAnimation/22.png',
  64. rect: {
  65. w: 25.0,
  66. h: 25.0,
  67. x: 0,
  68. y: 0,
  69. },
  70. },
  71. animationIcons: {
  72. paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  73. rect: {
  74. w: 25.0,
  75. h: 25.0,
  76. x: 0,
  77. y: 0
  78. },
  79. interval: 300
  80. },
  81. title: {
  82. text: '商圈',
  83. size: 12.0,
  84. normal: '#696969',
  85. selected: '#ff0',
  86. marginB: 6.0,
  87. ttf: 'Alkatip Basma Tom'
  88. },
  89. rect: {
  90. w: api.winWidth / 5.0,
  91. x: 0,
  92. y: 0,
  93. },
  94. }, {
  95. w: api.winWidth / 5.0,
  96. bg: {
  97. marginB: 0,
  98. image: 'rgba(0,0,0,0)',
  99. },
  100. icon: {
  101. normal: 'widget://res/NVTabBarAnimation/3.png',
  102. highlight: 'widget://res/NVTabBarAnimation/33.png',
  103. rect: {
  104. w: 25.0,
  105. h: 25.0,
  106. x: 0,
  107. y: 0,
  108. },
  109. },
  110. animationIcons: {
  111. paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  112. rect: {
  113. w: 25.0,
  114. h: 25.0,
  115. x: 0,
  116. y: 0
  117. },
  118. interval: 300
  119. },
  120. title: {
  121. text: '地图',
  122. size: 12.0,
  123. normal: '#696969',
  124. selected: '#ff0',
  125. marginB: 6.0,
  126. ttf: 'Alkatip Basma Tom'
  127. },
  128. rect: {
  129. w: api.winWidth / 5.0,
  130. x: 0,
  131. y: 0,
  132. },
  133. }, {
  134. w: api.winWidth / 5.0,
  135. bg: {
  136. marginB: 0,
  137. image: 'rgba(0,0,0,0)',
  138. },
  139. icon: {
  140. normal: 'widget://res/NVTabBarAnimation/4.png',
  141. highlight: 'widget://res/NVTabBarAnimation/44.png',
  142. rect: {
  143. w: 25.0,
  144. h: 25.0,
  145. x: 0,
  146. y: 0,
  147. },
  148. },
  149. animationIcons: {
  150. paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  151. rect: {
  152. w: 25.0,
  153. h: 25.0,
  154. x: 0,
  155. y: 0
  156. },
  157. interval: 300
  158. },
  159. title: {
  160. text: '广场',
  161. size: 12.0,
  162. normal: '#696969',
  163. selected: '#ff0',
  164. marginB: 6.0,
  165. ttf: 'Alkatip Basma Tom'
  166. },
  167. rect: {
  168. w: api.winWidth / 5.0,
  169. x: 0,
  170. y: 0,
  171. },
  172. }, {
  173. w: api.winWidth / 5.0,
  174. bg: {
  175. marginB: 0,
  176. image: 'rgba(0,0,0,0)',
  177. },
  178. icon: {
  179. normal: 'widget://res/NVTabBarAnimation/5.png',
  180. highlight: 'widget://res/NVTabBarAnimation/55.png',
  181. rect: {
  182. w: 25.0,
  183. h: 25.0,
  184. x: 0,
  185. y: 0,
  186. },
  187. },
  188. animationIcons: {
  189. paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  190. rect: {
  191. w: 25.0,
  192. h: 25.0,
  193. x: 0,
  194. y: 0
  195. },
  196. interval: 300
  197. },
  198. title: {
  199. text: '我的',
  200. size: 12.0,
  201. normal: '#696969',
  202. selected: '#ff0',
  203. marginB: 6.0,
  204. ttf: 'Alkatip Basma Tom'
  205. },
  206. rect: {
  207. w: api.winWidth / 5.0,
  208. x: 0,
  209. y: 0,
  210. },
  211. }],
  212. selectedIndex: 0
  213. }, function(ret, err) {
  214. if (ret && ret.eventType == "click") {
  215. alert(JSON.stringify(ret));
  216. }
  217. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏模块(并没有从内存清除)

hide();

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show();

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭模块,并从内存里清除

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮右上角的徽章

setBadge({params})

params

index:

  • 类型:数字
  • 说明:(可选项)要设置的子项的下标
  • 默认值:0

badge:

  • 类型:字符串
  • 说明:(可选项)要设置的徽章的内容
  • 备注:若不传则表示清除已显示的徽章,若传空字符串则显示小红点(大小为徽章的1.0/2.0)

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.setBadge({
  3. index: 3,
  4. badge: ''
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setItemAttr

设置按钮 item 的属性

setItemAttr({params})

params

index:

  • 类型:数字
  • 描述:(可选项)要设置的子项的索引
  • 默认值:0

selected:

  • 类型:布尔
  • 描述:(可选项)要设置的子项按钮的选中状态,true:选中状态|false:非选中状态
  • 默认值:true

icon:

  • 类型:JSON 对象
  • 描述:(可选项)要设置的子项按钮的 icon 静态图标,若不传则显示原值
  • 内部字段:
  1. {
  2. normal: '', //(可选项)字符串类型;子项按钮常态下的背景图片路径,要求本地路径(fs://、widget://)
  3. highlight: '', //(可选项)字符串类型;子项按钮高亮态下的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无按钮高亮效果
  4. selected: '', //(可选项)字符串类型;子项按钮按钮选中后的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无选中后效果
  5. }

animationIcons:

  • 类型:JSON 对象
  • 描述:(可选项)要设置的子项按钮的 icon 动态图标,若不传则显示原值
  • 内部字段:
  1. {
  2. paths: ['','',''], // (可选项)数组对象;组成动态动画的静态图片路径数组。图片路径要求本地路径(fs://、widget://)
  3. //注意:本参数添加后会覆盖替换原open中设置的参数,若不传则保持原值
  4. interval:300, //(可选项)动画的静态图片切换间隔时间,单位ms
  5. },

title:

  • 类型:JSON 对象
  • 描述:(可选项)子项标题设置,若不传则显示原值
  • 内部字段:
  1. {
  2. text: '', //(可选项)字符串类型;子项按钮下面的标题文字,传入则替换原open中设定的值
  3. size: 12.0, //(可选项)数字类型;子项标题文字大小;
  4. normal: '#696969', //(可选项)字符串类型;子项标题文字常态颜色;默认:#696969
  5. selected: '#ff0', //(可选项)字符串类型;子项标题文字选中后颜色;默认:#ff0
  6. }

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.setItemAttr({
  3. index:1,
  4. selected:true,
  5. icon:{
  6. normal:'',
  7. highlight:'',
  8. selected:'',
  9. },
  10. animationIcons:{
  11. paths: ['','',''],
  12. interval:300,
  13. },
  14. title:{
  15. text: 'll',
  16. size: 12.0,
  17. normal: '#696969',
  18. selected: '#ff0',
  19. marginB: 6.0
  20. },function(ret, err) {
  21. alert(JSON.stringify(ret));
  22. }
  23. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

bringToFront

将已经打开的模块置为最上层显示

bringToFront()

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.bringToFront();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。