UICoverFlowS

来自于:官方立即使用

概述

UICoverFlowS 实现可以带倒影的轮折叠的轮播图效果。

图片说明

open

打开 UICoverFlowS

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

params

rect:

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

styles:

  • 类型:JSON 类型
  • 描述:图片流的整体样式设置
  • 内部字段:
{

    bg: '#fff',                        //(可选项)字符串类型;图片流的背景,支持 rgb,rgba,#,img;默认:#fff
    image:{     
        activeW: 300,                  //(可选项)数字类型;当前图片的显示宽度;默认:w*2.0/3.0
        activeH: 400,                  //(可选项)数字类型;当前图片的显示高度;默认:h
        corner: 2,                     //(可选项)数字类型;图片圆角半径;默认:2
        placeholder: 'widget://placeholder.png', //(可选项)字符串类型;占位图片的路径,要求本地路径(fs://、widget://),若不传则不显示占位图
    }
}

index:

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

reflect:

  • 类型:布尔类型
  • 描述:(可选项)图片是否显示倒影
  • 默认:false

images:

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

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{

    id:                             //数字类型 ; 轮播图对应id
    eventType:                         //字符串类型;交互事件类型,取值范围如下:
                                       //show: 显示事件
                                       //click: 点击事件
                                       //scroll: 滚动事件
    index:                             //数字类型;返回用户选择的图片的下标
}

示例代码

var UICoverFlowS = api.require('UICoverFlowS');
UICoverFlowS.open({
    rect: {
        x: 0,
        y: 60,
        w: api.winWidth,
        h: 480
    },
    styles: {
        bg: '#fff',
        image: {
            activeW: 300,
            activeH: 400,
            corner: 2,
            placeholder: 'widget://placeholder.png'
        }

    },
    images: [{
        url: 'widget://res/coverflow/0.png'
    }, {
        url: 'widget://res/coverflow/1.png'
    }, {
        url: 'widget://res/coverflow/2.png'
    }, {
        url: 'widget://res/coverflow/3.png'
    }],
    index: 0,
    interval: 2000,
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setIndex

滚动到指定条目

setIndex({params})

params

index:

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

id:

  • 类型:数字
  • 描述:轮播图对应id

示例代码

var UICoverFlowS = api.require('UICoverFlowS');
UICoverFlowS.setIndex({

    id:1,
    index: 1
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭 UICoverFlowS

close()

params

id:

  • 类型:数字
  • 描述:轮播图对应id

示例代码

var UICoverFlowS = api.require('UICoverFlowS');
UICoverFlowS.close({id:2});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏显示的 coverFlow

hide()

params

id:

  • 类型:数字
  • 描述:轮播图对应id

示例代码

var UICoverFlowS = api.require('UICoverFlowS');
UICoverFlowS.hide({id:1});

补充说明

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的 UICoverFlowS

show()

params

id:

  • 类型:数字
  • 描述:轮播图对应id

示例代码

var UICoverFlowS = api.require('UICoverFlowS');
UICoverFlowS.show({id:1});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本