UIListGoods

close hide updateItem appendData

论坛示例

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

概述

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

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

open

打开 模块

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

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 备注：Android 必须传此参数。
  • 内部字段：

data：

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

bounces:

  • 类型：布尔
  • 描述：（可选项）是否开启弹动，android 平台不支持本参数
  • 默认：false

styles:

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

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（点击列表项的内容，除了配图和备注以外的区域）

示例代码

  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:'无货',
  30.     }, {
  31.        imgPath: 'widget://res/img/apicloud.png',
  33.         goodsMoney: 1999,
  34.         condition:'无货',
  36.     }, {
  37.         imgPath: 'widget://res/img/apicloud.png',
  38.         goodsName: '洗衣机',
  39.         goodsMoney: 1999,
  40.         condition:'无货',
  42.     }, {
  43.         imgPath: 'widget://res/img/apicloud.png',
  44.         goodsName: '洗衣机',
  45.         goodsMoney: 1999,
  46.         condition:'无货',
  48.     }, {
  49.         imgPath: 'widget://res/img/apicloud.png',
  50.         goodsName: '洗衣机',
  51.         goodsMoney: 1999,
  52.         condition:'无货',
  54.     }, {
  55.         imgPath: 'widget://res/img/apicloud.png',
  56.         goodsName: '洗衣机',
  57.         goodsMoney: 1999,
  58.         condition:'无货',
  60.     }, ],
  61.     },
  62.     fixedOn: api.frameName
  63. }, function(ret, err) {
  64.     if (ret) {
  65.         alert(JSON.stringify(ret));
  66.     } else {
  67.         alert(JSON.stringify(err));
  68.     }
  69. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭数据列表模块

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示 UIListView 模块

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:'无货',
  9.     }]
  10.     if (ret) {
  11.         alert(JSON.stringify(ret));
  12.     } else {
  13.         alert(JSON.stringify(err));
  14.     }
  15. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

updateItem

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

params

index：

  • 类型：数字
  • 描述：（可选项）数据列表的索引
  • 默认值：0

data：

  • 类型：JSON 对象
  • 描述：列表的数据源
  • 内部字段：
  1. {
  3.     goodsName:'洗衣机',     //（可选项）字符串类型；名称，若不传则不显示
  4.     goodsMoney:'1999'     //（可选项）数字类型；商品价格
  5.     condition:'无货',      =//（可选项）字符串类型；状态
  6. }

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  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:'无货',
  10.     }
  11. }, function(ret, err) {
  12.     if (ret) {
  13.         alert(JSON.stringify(ret));
  14.     } else {
  15.         alert(JSON.stringify(err));
  16.     }
  17. });

可用性

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:'无货',
  10.     }
  11. }, function(ret, err) {
  12.     if (ret) {
  13.         alert(JSON.stringify(ret));
  14.     } else {
  15.         alert(JSON.stringify(err));
  16.     }
  17. });

可用性

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. 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:'无货',
  9.     }]
  10. }, function(ret, err) {
  11.     if (ret) {
  12.         alert(JSON.stringify(ret));
  13.     } else {
  14.         alert(JSON.stringify(err));
  15. });

可用性

iOS系统，Android系统