UICoverFlow

来自于:官方立即使用

open setIndex close hide show clearCache

论坛示例

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

概述

UICoverFlow 底层封装了 openGL 实现的 3D 图片流效果。开发者可自定义图片大小及其数量。只需一个 open 接口就能打开一个超炫酷效果的导航菜单。UICoverFlow 模块是 coverFlow 模块的升级版

图片说明

open

打开 UICoverFlow

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

params

rect:

  • 类型:JSON 类型
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. w: api.winWidth, //(可选项)数字类型;模块的宽度;默认值:所属的 Window 或 Frame 的宽度
  5. h: 480 //(可选项)数字类型;模块的高度;默认值:所属的 Window 或 Frame 的高度
  6. }

styles:

  • 类型:JSON 类型
  • 描述:图片流的整体样式设置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;图片流的背景,支持 rgb,rgba,#,img;默认:#fff
  3. image:{
  4. activeW: 300, //(可选项)数字类型;当前图片的显示宽度;默认:w*2.0/3.0
  5. activeH: 400, //(可选项)数字类型;当前图片的显示高度;默认:h
  6. corner: 2, //(可选项)数字类型;图片圆角半径;默认:2
  7. placeholder: 'widget://placeholder.png', //(可选项)字符串类型;占位图片的路径,要求本地路径(fs://、widget://),若不传则不显示占位图
  8. },
  9. indicator:{ //(可选项)JSON 类型;指示器的样式设置;默认:未设置时不显示
  10. bg: '#eee', //(可选项)字符串类型;指示器未激活时的背景,支持 rgb,rgba,#;默认:#eee
  11. active: '#f00', //(可选项)字符串类型;指示器激活时的背景,支持 rgb,rgba,#;默认:#eee
  12. }
  13. }

index:

  • 类型:数字类型
  • 描述:(可选项)初始选中的图片索引值,从 0 开始
  • 默认:0

interval:

  • 类型:数字类型
  • 描述:(可选项)图片流每次切换的停留间隔,毫秒数;只有 auto 为 true 时有效
  • 默认:3000

images:

  • 类型:JSON 数组
  • 描述:为图片流指定数据
  • 内部字段:
  1. [{
  2. url: 'widget://res/coverflow/0.png' //字符串类型;对应图片的网址,支持 fs://、widget://、http://等
  3. }]

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType //字符串类型;交互事件类型,取值范围如下:
  3. //show: 显示事件
  4. //click: 点击事件
  5. //scroll: 滚动事件
  6. index: //数字类型;返回用户选择的图片的下标
  7. }

示例代码

  1. var UICoverFlow = api.require('UICoverFlow');
  2. UICoverFlow.open({
  3. rect: {
  4. x: 0,
  5. y: 60,
  6. w: api.winWidth,
  7. h: 480
  8. },
  9. styles: {
  10. bg: '#fff',
  11. image: {
  12. activeW: 300,
  13. activeH: 400,
  14. corner: 2,
  15. placeholder: 'widget://placeholder.png'
  16. }
  17. },
  18. images: [{
  19. url: 'widget://res/coverflow/0.png'
  20. }, {
  21. url: 'widget://res/coverflow/1.png'
  22. }, {
  23. url: 'widget://res/coverflow/2.png'
  24. }, {
  25. url: 'widget://res/coverflow/3.png'
  26. }],
  27. index: 0,
  28. interval: 2000,
  29. fixedOn: api.frameName,
  30. fixed: false
  31. }, function(ret, err) {
  32. if (ret) {
  33. alert(JSON.stringify(ret));
  34. } else {
  35. alert(JSON.stringify(err));
  36. }
  37. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setIndex

滚动到指定条目

setIndex({params})

params

index:

  • 类型:数字
  • 描述:滚动的指定位置索引

示例代码

  1. var UICoverFlow = api.require('UICoverFlow');
  2. UICoverFlow.setIndex({
  3. index: 1
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭 UICoverFlow

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏显示的 coverFlow

hide()

示例代码

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

补充说明

只是隐藏模块视图,并没有从内存里清除

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的 UICoverFlow

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

clearCache

清除缓存到本地的网络图片,本接口只清除本模块缓存的数据,若要清除本app缓存的所有数据这调用api.clearCache

clearCache()

示例代码

  1. var UICoverFlow = api.require('UICoverFlow');
  2. UICoverFlow.clearCache();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本