UIListGoods

论坛示例

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

概述

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, //(可选项)数字类型;插件的宽度,支持设置'auto';默认值:所属的 Window 或 Frame 的宽度
    h: 480  //(可选项)数字类型;插件的高度,支持设置'auto';默认值:所属的 Window 或 Frame 的高度
}

data:

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

bounces:

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

styles:

  • 类型:JSON 对象
  • 描述:(可选项)插件各部分的样式
  • 内部字段:
{  
    
    item: {                             //(可选项)JSON对象;列表项的样式
        height:280                      //(可选项)数字类型;item的高度;默认:280
        columnNub:2                     //(可选项)数字类型;列表的列数;默认:2
        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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

# **setRefreshHeader** (只支持iOS)

设置下拉刷新

setRefreshHeader({params}, callback(ret))

params

loadingImg:

  • 类型:字符串
  • 描述:下拉刷新时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)

bgColor:

  • 类型:字符串
  • 描述:(可选项)下拉刷新区域的背景色,支持 rgb、rgba、#
  • 默认值:'#f5f5f5'

textColor:

  • 类型:字符串
  • 描述:(可选项)提示文字颜色,支持 rgb、rgba、#
  • 默认值:'#8e8e8e'

textDown:

  • 类型:字符串
  • 描述:(可选项)下拉提示文字
  • 默认值:下拉可以刷新...

textUp:

  • 类型:字符串
  • 描述:(可选项)松开提示文字
  • 默认值:松开开始刷新...

loadingText:

  • 类型:字符串
  • 描述:(可选项)提示文字
  • 默认值:正在加载...

lastUpdateText:

  • 类型:字符串
  • 描述:(可选项)提示文字
  • 默认值:上次更新时间:

showTime:

  • 类型:布尔值
  • 描述:(可选项)是否显示刷新时间
  • 默认值:true

callback()

{
   status:   //布尔类型;true || false
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.setRefreshHeader({
    loadingImg: 'widget://res/UIListView_arrow.png',
    bgColor: '#F5F5F5',
    textColor: '#8E8E8E',
    textDown: '下拉可以刷新...',
    textUp: '松开开始刷新...',
    showTime: true
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **setRefreshFooter** (只支持iOS)

设置上拉加载

setRefreshFooter({params}, callback())

params

loadingImg:

  • 类型:字符串
  • 描述:上拉加载时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)

bgColor:

  • 类型:字符串
  • 描述:(可选项)上拉加载区域的背景色,支持 rgb、rgba、#
  • 默认值:'#f5f5f5'

textColor:

  • 类型:字符串
  • 描述:(可选项)提示文字颜色,支持 rgb、rgba、#
  • 默认值:'#8e8e8e'

textUp:

  • 类型:字符串
  • 描述:(可选项)上拉提示文字
  • 默认值:'上拉加载更多...'

textDown:

  • 类型:字符串
  • 描述:(可选项)松开提示文字
  • 默认值:'松开开始加载...'

loadingText:

  • 类型:字符串
  • 描述:(可选项)提示文字
  • 默认值:正在加载...

lastUpdateText:

  • 类型:字符串
  • 描述:(可选项)提示文字
  • 默认值:上次更新时间:

showTime:

  • 类型:布尔值
  • 描述:(可选项)是否显示刷新时间
  • 默认值:true

callback(ret)

{
   status:   //布尔类型;true || false
}

示例代码

var UIListGoods = api.require('UIListGoods');
UIListGoods.setRefreshFooter({
    loadingImg: 'widget://res/UIListView_arrow.png',
    bgColor: '#F5F5F5',
    textColor: '#8E8E8E',
    textUp: '上拉加载更多...',
    textDown: '松开开始加载...',
    showTime: true
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **endRefresh** (只支持iOS)

停止加载

endRefresh()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/02/29