UIListGoods

来自于：APICloud 官方立即使用 UI模块不能满足布局需求？试试APICloud3.0，用AVM灵活定制模块效果，H5编写即可实现纯原生性能

open close show hide reloadData updateItem insertItem appendData setRefreshHeader setRefreshFooter endRefresh

论坛示例

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

概述

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) {
        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及更高版本

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) {
        alert(JSON.stringify(ret));
    } else {
        alert(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) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

endRefresh (只支持iOS)

停止加载

endRefresh()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

APICloud

模块开发

端API

设备访问

功能扩展

界面布局

导航菜单

开放SDK

云服务对接

AVM多端模块

H5模块

前端框架

云API

技术专题

开发工具

下载

微信公众号适配

七天培训课教程

其他

Faq

开放平台接入指南

自定义加速域名

云主机

入门教程

部署与管理

常见FAQ

MTL.js

UIListGoods

论坛示例

概述

open

params

callback(ret)

示例代码

可用性

close

示例代码

可用性

show

示例代码

可用性

hide

示例代码

可用性

reloadData

params

callback(ret)

示例代码

可用性

updateItem

params

callback(ret)

示例代码

可用性

insertItem

params

callback(ret)

示例代码

可用性

appendData

params

callback(ret)

示例代码

可用性

setRefreshHeader (只支持iOS)

params

callback()

示例代码

可用性

setRefreshFooter (只支持iOS)

params

callback(ret)

示例代码

可用性

endRefresh (只支持iOS)

示例代码

可用性