coverFlow

来自于:官方立即使用

open close hide show

论坛示例

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

概述

coverFlow底层封装了openGL实现的3D图片流效果和逼真的倒影。开发者可自定义图片及其数量。只需一个open接口就能打开一个超炫酷的coverFlow效果导航菜单

图片说明

open

打开coverFlow

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

params

x :

  • 类型:数字
  • 默认值:0
  • 描述:视图左上角点坐标,可为空

y:

  • 类型:数字
  • 默认值:100
  • 描述:视图左上角点坐标,可为空

w:

  • 类型:数字
  • 默认值:当前设备屏幕的宽
  • 描述:视图的宽,可为空

h:

  • 类型:数字
  • 默认值:w-20
  • 描述:视图的高,可为空

bgColor:

  • 类型:字符串
  • 默认值:rgba(0,0,0,0)
  • 描述:背景颜色十六进制值,支持 rgb,rgba,#,可为空

paths:

  • 类型:数组
  • 默认值:无
  • 描述:图片路径组成的数组,不可为空

fixedOn:

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

reflect:

  • 类型:布尔值
  • 默认值:true
  • 描述:是否显示倒影,可为空

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象

内部字段:

  1. {
  2. eventType //事件类型,取值范围如下:
  3. click//点击事件
  4. scroll//滚动事件
  5. index: //返回用户选择的图片的下标
  6. }

示例代码

  1. var coverFlow = api.require('coverFlow');
  2. coverFlow.open({
  3. x: 0,
  4. y: 0,
  5. w: api.winWidth,
  6. h: 300,
  7. bgColor: '#ADD8E6',
  8. paths: [
  9. 'widget://res/a1.png',
  10. 'widget://res/a1.png',
  11. 'widget://res/a1.png',
  12. 'widget://res/a1.png',
  13. 'widget://res/a1.png',
  14. 'widget://res/a1.png',
  15. 'widget://res/a1.png',
  16. 'widget://res/a1.png',
  17. 'widget://res/a1.png'
  18. ],
  19. fixedOn: api.frameName
  20. }, function(ret, err) {
  21. if (ret) {
  22. alert(JSON.stringify(ret));
  23. } else {
  24. alert(JSON.stringify(err));
  25. }
  26. });

补充说明

打开coverFlow模块视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭coverFlow

close()

示例代码

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

补充说明

关闭coverFlow

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏显示的coverFlow视图

hide()

示例代码

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

补充说明

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

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本

show

显示已隐藏的coverFlow视图

show()

示例代码

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

补充说明

显示模块视图

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本

论坛示例

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