UIListGoods

来自于:APICloud 官方立即使用

概述

UIListGoods 模块封装了一个数据列表控件,列表项水平侧滑可出现控制按钮;开发者可自定义列表的数据源,及列表的样式,支持列表项的增、删、改、查,支持批量更新、追加数据,支持下拉刷新和上拉加载事件。

注意 该模块android版本使用Android Studio开发,请在编译时勾选升级环境进行编译

open

打开 模块

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

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 备注:Android 必须传此参数。
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,   //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w: 320, //(可选项)数字类型;模块的宽度;默认值:所属的 Window 或 Frame 的宽度
    h: 480  //(可选项)数字类型;模块的高度;默认值:所属的 Window 或 Frame 的高度
}

data:

  • 类型:数组
  • 描述:列表的数据源,
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,
    goodsName:'洗衣机',     //(可选项)字符串类型;名称,若不传则不显示
    goodsMoney:'1999'     //(可选项)数字类型;商品价格
    condition:'无货',      //(可选项)字符串类型;状态

}]

bounces:

  • 类型:布尔
  • 描述:(可选项)是否开启弹动,android 平台不支持本参数
  • 默认:false

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:
{  

    item: {                             //(可选项)JSON对象;列表项的样式
        height:280                      //(可选项)数字类型;item的高度;默认:280
        bgColor: '#AFEEEE',             //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#AFEEEE'

        imgWidth: 100,                   //(可选项)数字类型;列表项配图的宽度;默认:列表项的高度减去10px
        imgHeight: 100,                  //(可选项)数字类型;列表项配图的高度;默认:列表项的高度减去10px
        imgMarginTop:15,               //(可选项)数字类型;列表项商品配图的上边距;默认:15
        marginLeft:10,                  //(可选项)数字类型;列表项的(商品名字,和商品价格)左边距;默认:12
        goodsNameMarginRight:5,                  //(可选项)数字类型;列表项的(商品名字)右边距;默认:5
        goodsNameSize: 12,                   //(可选项)数字类型;列表项商品文字大小;默认:12
        goodsNameColor: '#000',              //(可选项)字符串类型;列表项商品文字颜色,支持 rgb,rgba,#;默认:'#000000
        goodsNameMarginTop:5,               //(可选项)数字类型;列表项商品文字和配图距离分割线的上边距;默认:5
        goodsMoneySize: 12,                  //(可选项)数字类型;列表项商品价格文字大小;默认:12
        goodsMoneyColor: '#000',             //(可选项)字符串类型;列表项商品价格文字颜色,支持 rgb,rgba,#;默认:'#000000'
        goodsMoneyMarginBottom:5             //(可选项)数字类型;列表项的商品价格下边距;默认:5
        conditionSize: 12,                   //(可选项)数字类型;列表项状态文字大小;默认:12
        conditionColor: '#000',             //(可选项)字符串类型;列表项状态文字颜色,支持 rgb,rgba,#;默认:'#000000'
        conditionMarginBottom:5             //(可选项)数字类型;列表项的状态下边距;默认:5
        marginRight:5                  //(可选项)数字类型;列表项的(状态)的左边距;默认:5
    },

}

backgroundColor:

  • 类型:字符串类型
  • 描述:(可选项)模块的背景色,支持 rgb,rgba,#
  • 默认:rgba(241,241,241,1)

fixedOn:

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

showScrollBar:

  • 类型:布尔
  • 描述:(可选项)是否显示滚动条
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',  //字符串类型;交互事件类型
                        //取值范围如下:
                         //show(模块加载成功)
                        //clickContent(点击列表项的内容,除了配图和备注以外的区域)
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.open({
    rect: {
        x: 0,
        y: 0,
        w: api.winWidth,
        h: api.frameHeight
    },
    data: [{
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',
    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',
    }, {
       imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',
    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, {
       imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, {
        imgPath: 'widget://res/img/apicloud.png',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }, ],
    },
    fixedOn: api.frameName
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭数据列表模块

close()

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示 UIListView 模块

show()

示例代码

var UIListUpload = api.require('UIListUpload');
UIListUpload.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏 UIListView 模块

hide()

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params}, callback(ret))

params

data:

  • 类型:数组
  • 描述:(可选项)列表的数据源
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,
    goodsName:'洗衣机',     //(可选项)字符串类型;名称,若不传则不显示
    goodsMoney:'1999'     //(可选项)数字类型;商品价格
    condition:'无货',      =//(可选项)字符串类型;状态
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false     
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.reloadData({
    data: [{
        imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }]
}, function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateItem

根据索引更新某一条列表的数据

updateItem({params}, callback(ret))

params

index:

  • 类型:数字
  • 描述:(可选项)数据列表的索引
  • 默认值:0

data:

  • 类型:JSON 对象
  • 描述:列表的数据源
  • 内部字段:
{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,
    goodsName:'洗衣机',     //(可选项)字符串类型;名称,若不传则不显示
    goodsMoney:'1999'     //(可选项)数字类型;商品价格
    condition:'无货',      =//(可选项)字符串类型;状态
}

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true     //布尔型;true||false
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.updateItem({
    index: 2,
    data: {
        imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

insertItem

根据索引向某一条列表插入数据

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

params

index:

  • 类型:数字
  • 描述:(可选项)数据列表的索引
  • 默认值:列表最后一条数据的索引

data:

  • 类型:JSON 对象
  • 描述:列表的数据源
  • 内部字段:
{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,
    goodsName:'洗衣机',     //(可选项)字符串类型;名称,若不传则不显示
    goodsMoney:'1999'     //(可选项)数字类型;商品价格
    condition:'无货',      =//(可选项)字符串类型;状态
}

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true          //布尔型;true||false
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.insertItem({
    index: 2,
    data: {
        imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendData

向列表末端追加数据

appendData({params}, callback(ret))

params

data:

  • 类型:数组对象
  • 描述:列表的数据源
  • 内部字段:
[{
    imgPath: '',            //(可选项)字符串类型;列表项的配图路径,支持http://、https://、widget://、fs://等协议,网络图片会被缓存到本地,
    goodsName:'洗衣机',     //(可选项)字符串类型;名称,若不传则不显示
    goodsMoney:'1999'     //(可选项)数字类型;商品价格
    condition:'无货',      =//(可选项)字符串类型;状态
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.appendData({
    data: [{
        imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
        goodsName: '洗衣机',
        goodsMoney: 1999,
        condition:'无货',

    }]
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本