UIListCard
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
概述
UIListCard 展示了一个联系人列表。开发者只需传入数据源,模块会自动将联系人排序,展示出来。列表右侧字母导航条会自动随联系人数量调整。
列表条目(cell)布局如下图所示:
open
打开列表
open({params}, callback(ret))
rect:
- 类型:JSON 对象
- 描述:(可选项)模块的位置及尺寸
- 内部字段:
contacts:
- 类型:数组对象
- 描述:列表数据源
- 内部字段:
name: '艾雪瑞', //(必传)字符串类型;条目的标题,若传空则放在#号分组下面
customerTypes: '个人客户'//(可选项)字符串类型;(可支持传入图片,可支持widget://和http://和https://)条目的类型,不传则不显示
}]
styles:
- 类型:JSON 对象
- 描述:(可选项)列表样式设置
- 内部字段:
{
backgroudColor:'rgba(0,0,0,0)', // (可选项) 模块的背景颜色,默认:'rgba(0,0,0,0)'
sectionTitle: { //(可选项)JSON对象;标题的样式
bgColor: '#eee', //(可选项)字符串类型;标题的背景色,支持 rgb、rgba、#;默认:'#EEEEEE'
color: '#000', //(可选项)字符串类型;标题文字颜色,支持 rgb、rgba、#;默认:'#000000'
size: 12, //(可选项)数字类型;标题文字大小;默认:12.0
height: 25 //(可选项)数字类型;区域标题的高度,默认:25.0
item: { //(可选项)JSON对象;列表项的样式
bgColor: '#fff', //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#FFFFFF'
activeBgColor: '#696969', //(可选项)字符串类型;列表项按下时的背景色,支持 rgb、rgba、#;默认:'#696969'
color: '#000', //(可选项)字符串类型;列表项的文字颜色,支持 rgb、rgba、#,默认:'#000000'
size: 14, //(可选项)数字类型;列表项的文字大小,默认:14.0
height: 40 //(可选项)数字类型;列表项的高度,默认:40.0
customerColor:'#000' // (可选项)字符串类型;条目类型的文字颜色
customerSize: 14, //(可选项)数字类型;条目类型的文字的大小
customerWidth:10 // (可选项) 数字类型;
条目类型若为图片,则此参数有效,条目类型图片的宽度
customerHeight:10 // (可选项) 数字类型;
条目类型若为图片,则此参数有效,条目类型图片的高度
}
}
indicator:
- 类型:布尔类型
- 描述:(可选项)是否显示字母索引
- 默认:true
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
- 默认:模块依附于当前 window
callback(ret)
- 类型:JSON 对象
- 内部字段:
{
eventType: 'show', //字符串类型;交互事件类型,取值范围如下:
//show:模块打开,数据排序成功显示在屏幕事件
//click:用户点击事件
section: 0, //数字类型;被点击的条目所在的区域在所有区域中的索引,仅当 eventType 为 click 时有值
index: 0, //数字类型;被点击的条目在所在区域内的索引,仅当 eventType 为 click 时有值
contact: {} //JSON 对象;所选条目的联系人信息,内容同传入的数据一致,仅当 eventType 为 click 时有值
}
示例代码
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
close
关闭列表模块
close()
示例代码
var UIListCard = api.require('UIListCard');
UIListCard.close();
iOS系统,Android系统
可提供的1.0.0及更高版本
hide
隐藏列表模块,并没有从内存里清除
hide()
示例代码
var UIListCard = api.require('UIListCard');
UIListCard.hide();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
show
显示已隐藏的列表模块
show()
示例代码
var UIListCard = api.require('UIListCard');
UIListCard.show();
可用性
可提供的1.0.0及更高版本
reloadData
刷新列表数据
reloadData({params})
contacts:
- 类型:JSON 对象
- 描述:列表数据源
- 内部字段:
示例代码
var UIListCard = api.require('UIListCard');
UIListCard.reloadData({
contacts:[{
"employee_id": 191,
"name": "刘德华",
"customerTypes" : "个人客户",
"dept_id": "002000",
"isdeleted": "N",
"isremark": 1,
"phones": [
{
"phone": "13366148872",
"type": "1"
}
]
},{
"employee_id": 192,
"name": "张学友",
"customerTypes" : "个人客户",
"isdeleted": "N",
"tags": "",
"isremark": 1,
"phones": [
{
"phone": "13366148872",
"type": "1"
}
]
},{
"employee_id": 193,
"name": "郭富城",
"customerTypes" : "个人客户",
"dept_id": "002000",
"isdeleted": "N",
"tags": "",
"isremark": 1,
"phones": [
{
"phone": "13366148872",
"type": "1"
}
]
}]
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
appendData
向列表末端追加数据
appendData({params}, callback(ret))
params
data:
- 类型:数组对象
- 描述:列表的数据源,若不传或传空,仅收起上拉加载组件
- 内部字段:
[{
name: '木子', //字符串类型;条目的标题,若传空则放在#号分组下面。
customerTypes: '个人客户' //字符串类型;条目类型,不传则不显示
}]
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本