UIListGoods

来自于:APICloud 官方立即使用

open close show hide reloadData updateItem insertItem appendData

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码供您参考。

概述

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

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

open

打开 模块

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

params

rect:

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

data:

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

bounces:

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

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:
  1. {
  2. item: { //(可选项)JSON对象;列表项的样式
  3. height:280 //(可选项)数字类型;item的高度;默认:280
  4. bgColor: '#AFEEEE', //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#AFEEEE'
  5. imgWidth: 100, //(可选项)数字类型;列表项配图的宽度;默认:列表项的高度减去10px
  6. imgHeight: 100, //(可选项)数字类型;列表项配图的高度;默认:列表项的高度减去10px
  7. imgMarginTop:15, //(可选项)数字类型;列表项商品配图的上边距;默认:15
  8. marginLeft:10, //(可选项)数字类型;列表项的(商品名字,和商品价格)左边距;默认:12
  9. goodsNameMarginRight:5, //(可选项)数字类型;列表项的(商品名字)右边距;默认:5
  10. goodsNameSize: 12, //(可选项)数字类型;列表项商品文字大小;默认:12
  11. goodsNameColor: '#000', //(可选项)字符串类型;列表项商品文字颜色,支持 rgb,rgba,#;默认:'#000000
  12. goodsNameMarginTop:5, //(可选项)数字类型;列表项商品文字和配图距离分割线的上边距;默认:5
  13. goodsMoneySize: 12, //(可选项)数字类型;列表项商品价格文字大小;默认:12
  14. goodsMoneyColor: '#000', //(可选项)字符串类型;列表项商品价格文字颜色,支持 rgb,rgba,#;默认:'#000000'
  15. goodsMoneyMarginBottom:5 //(可选项)数字类型;列表项的商品价格下边距;默认:5
  16. conditionSize: 12, //(可选项)数字类型;列表项状态文字大小;默认:12
  17. conditionColor: '#000', //(可选项)字符串类型;列表项状态文字颜色,支持 rgb,rgba,#;默认:'#000000'
  18. conditionMarginBottom:5 //(可选项)数字类型;列表项的状态下边距;默认:5
  19. marginRight:5 //(可选项)数字类型;列表项的(状态)的左边距;默认:5
  20. },
  21. }

backgroundColor:

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

fixedOn:

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

showScrollBar:

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

callback(ret)

ret:

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

示例代码

  1. var UIListGoods = api.require('UIListGoods');
  2. UIListGoods.open({
  3. rect: {
  4. x: 0,
  5. y: 0,
  6. w: api.winWidth,
  7. h: api.frameHeight
  8. },
  9. data: [{
  10. imgPath: 'widget://res/img/apicloud.png',
  11. goodsName: '洗衣机',
  12. goodsMoney: 1999,
  13. condition:'无货',
  14. }, {
  15. imgPath: 'widget://res/img/apicloud.png',
  16. goodsName: '洗衣机',
  17. goodsMoney: 1999,
  18. condition:'无货',
  19. }, {
  20. imgPath: 'widget://res/img/apicloud.png',
  21. goodsName: '洗衣机',
  22. goodsMoney: 1999,
  23. condition:'无货',
  24. }, {
  25. imgPath: 'widget://res/img/apicloud.png',
  26. goodsName: '洗衣机',
  27. goodsMoney: 1999,
  28. condition:'无货',
  29. }, {
  30. imgPath: 'widget://res/img/apicloud.png',
  31. goodsName: '洗衣机',
  32. goodsMoney: 1999,
  33. condition:'无货',
  34. }, {
  35. imgPath: 'widget://res/img/apicloud.png',
  36. goodsName: '洗衣机',
  37. goodsMoney: 1999,
  38. condition:'无货',
  39. }, {
  40. imgPath: 'widget://res/img/apicloud.png',
  41. goodsName: '洗衣机',
  42. goodsMoney: 1999,
  43. condition:'无货',
  44. }, {
  45. imgPath: 'widget://res/img/apicloud.png',
  46. goodsName: '洗衣机',
  47. goodsMoney: 1999,
  48. condition:'无货',
  49. }, {
  50. imgPath: 'widget://res/img/apicloud.png',
  51. goodsName: '洗衣机',
  52. goodsMoney: 1999,
  53. condition:'无货',
  54. }, ],
  55. },
  56. fixedOn: api.frameName
  57. }, function(ret, err) {
  58. if (ret) {
  59. alert(JSON.stringify(ret));
  60. } else {
  61. alert(JSON.stringify(err));
  62. }
  63. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭数据列表模块

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示 UIListView 模块

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏 UIListView 模块

hide()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params}, callback(ret))

params

data:

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

callback(ret)

ret:

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

示例代码

  1. var UIListGoods = api.require('UIListGoods');
  2. UIListGoods.reloadData({
  3. data: [{
  4. imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  5. goodsName: '洗衣机',
  6. goodsMoney: 1999,
  7. condition:'无货',
  8. }]
  9. }, function(ret) {
  10. if (ret) {
  11. alert(JSON.stringify(ret));
  12. } else {
  13. alert(JSON.stringify(err));
  14. }
  15. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateItem

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

updateItem({params}, callback(ret))

params

index:

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

data:

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

callback(ret)

ret:

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

示例代码

  1. var UIListGoods = api.require('UIListGoods');
  2. UIListGoods.updateItem({
  3. index: 2,
  4. data: {
  5. imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  6. goodsName: '洗衣机',
  7. goodsMoney: 1999,
  8. condition:'无货',
  9. }
  10. }, function(ret, err) {
  11. if (ret) {
  12. alert(JSON.stringify(ret));
  13. } else {
  14. alert(JSON.stringify(err));
  15. }
  16. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

insertItem

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

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

params

index:

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

data:

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

callback(ret)

ret:

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

示例代码

  1. var UIListGoods = api.require('UIListGoods');
  2. UIListGoods.insertItem({
  3. index: 2,
  4. data: {
  5. imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
  6. goodsName: '洗衣机',
  7. goodsMoney: 1999,
  8. condition:'无货',
  9. }
  10. }, function(ret, err) {
  11. if (ret) {
  12. alert(JSON.stringify(ret));
  13. } else {
  14. alert(JSON.stringify(err));
  15. }
  16. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendData

向列表末端追加数据

appendData({params}, callback(ret))

params

data:

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

callback(ret)

ret:

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

示例代码

  1. var UIListGoods = api.require('UIListGoods');
  2. UIListGoods.appendData({
  3. data: [{
  4. imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
  5. goodsName: '洗衣机',
  6. goodsMoney: 1999,
  7. condition:'无货',
  8. }]
  9. }, function(ret, err) {
  10. if (ret) {
  11. alert(JSON.stringify(ret));
  12. } else {
  13. alert(JSON.stringify(err));
  14. }
  15. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本