listContact
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
listContact定义了一个类似微信联系人界面的模板，开发者可自定义数据源，ui界面里的各种元素的样式等，右边字母索引导航条不支持字母以外的内容
open
打开
open({params}, callback(ret, err))
params
x：
- 类型：数字
- 默认值：0
- 描述：（可选项）列表视图的左上角点的坐标
y：
- 类型：数字
- 默认值：0
- 描述：（可选项）列表视图的左上角点的坐标
w：
- 类型：数字
- 默认值：当前屏幕宽度
- 描述：（可选项）列表视图的宽
h：
- 类型：数字
- 默认值：当前屏幕的高
- 描述：（可选项）列表视图的高
bgColor：
- 类型：字符串
- 默认值：#FFFFFF
- 描述：（可选项）当前屏幕宽度列表的背景色，支持 rgb，rgba，#
groupTitle:
- 类型：JSON 对象
- 默认值：见内部字段
- 描述：（可选项）配置组标题的字体颜色和大小
内部字段：
{
height:30 //（可选项）数字类型；groupTitle的高度；默认：30
color: //（可选项）字符串类型，默认#949494,支持 rgb，rgba，#
size: //（可选项）数字类型，默认13
selectedSize: //（可选项）数字类型；选中后所在分组标题大小；默认；13
bgColor: //（可选项）标题背景色，默认#DBDBDB,支持 rgb，rgba，#
}
leftBtn：
- 类型：数组对象
- 默认值：无
- 描述：（可选项）往右滑动cell露出的按钮组成的数字
- 备注：若不传则表示cell不可向右滑动
- 内部字段：
[{
color: //按钮背景色，支持 rgb，rgba，#
title: //按钮名字
selectColor //按钮选中时候的颜色值，支持 rgb，rgba，#
}]
leftBg：
- 类型：字符串
- 默认值：#5cacee
- 描述：（可选项）往右滑动cell露出的视图的背景色，支持 rgb，rgba，#
rightBtn：
- 类型：数组对象
- 默认值：无
- 描述：（可选项）往左滑动cell露出的按钮组成的数组
- 备注：若不传则表示cell不可向左滑动
- 内部字段：
[{
color: //按钮背景色，支持 rgb，rgba，#
title: //按钮名字，支持 rgb，rgba，#
selectColor //按钮选中时候的颜色值，支持 rgb，rgba，#
}]
rightBg：
- 类型：字符串
- 默认值：#6c7b8b
- 描述：（可选项）往左滑动cell露出的视图的背景色，支持 rgb，rgba，#
borderColor：
- 类型：字符串
- 默认值：#696969
- 描述：（可选项）每个cell之间分割线的颜色，支持 rgb，rgba，#
cellBgColor：
- 类型：字符串
- 默认值:#AFEEEE
- 描述：（可选项）cell的背景色，支持 rgb，rgba，#
cellSelectColor：
- 类型：字符串
- 默认值：#F5F5F5
- 描述：（可选项）选中cell时的颜色，支持 rgb，rgba，#
cellHeight：
- 类型：数字
- 默认值：55
- 描述：（可选项）每个cell的高度
imgHeight：
- 类型：数字
- 默认值：cellHeight-10
- 描述：（可选项）头像的高
imgWidth：
- 类型：数字
- 默认值：imgHeight
- 描述：（可选项）头像的宽
imgCorner:
- 类型：数字
- 描述：图片的圆角
- 默认：0
titleWidth:
- 类型：数字
- 描述：标题宽度
data：
- 类型：JSON 对象
- 默认值：无
- 描述：列表数据源，必传项
- 内部字段：
{
common: [{ //区域标题，字符串类型
img: //（可选项）cell的头像，，支持http、https、widget、fs等网络和本地图片路径协议，网络图片会被缓存到本地
placeholderImg: //（可选项）头像,本地路径,加载网络图片时显示界面上的图，可为空
title: //（可选项）cell的标题，若subtitle为空时，title上下居中位置
subTitle: //（可选项）cell的子标题，为空时title上下居中显示
titleLocation //（可选项）标题在水平线上的位置center,left,right，默认left
titleSize //（可选项）标题字体的大小，默认12
titleColor //（可选项）标题字体的颜色值，默认黑色，支持 rgb，rgba，#
subTitleLocation //（可选项）子标题在水平线上的位置center,left,right默认left
subTitleSize //（可选项）子标题字体的大小，默认12
subTitleColor //（可选项）子标题字体的颜色值,默认黑色,支持 rgb，rgba，#
}],
A:[{}],
B:[{}],,,,,,
}
indicator:
- 类型：JSON 对象
- 默认值：无
- 描述：（可选项）是否添加右边索引导航条
- 备注：若不传则不显示右边索引导航条
- 内部字段：
{
bgColor: //（可选项）背景色，字符串，默认透明，支持 rgb，rgba，#
color： //（可选项）索引指器颜色,字符串类型，默认#A1A1A1,支持 rgb，rgba，#
}
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
searchBar:
- 类型：JSON 对象
- 默认值：无
- 描述：（可选项）搜索条设置
- 备注：若不传则不显示搜索条
- 内部字段：
{
bgColor: //（可选项）搜索条背景色，字符串，默认透明，支持 rgb，rgba，#
cancelColor: //（可选项）取消文字的颜色，字符串类型，默认#A1A1A1,支持 rgb，rgba，#
placeholder: //（可选项）搜索条提示文字，字符串类型，默认空，不传则不显示提示文字
h: //（可选项）搜索框的高度，数字类型，默认44
textFieldBgColor: //（可选项）搜索框文本区域的背景色，字符串类型，支持rgb、rgba、#
}
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
index: //点击某个cell所在区域内的cell的下标
section: //被点击的cell所在的区域的下标
key： //被点击的cell的区域的key
clickType: //点击类型，0-cell；1-右边按钮；2-左边的按钮
btnIndex: //点击按钮时返回其下标
}
示例代码
var listContact = api.require('listContact');
listContact.open({
h: api.frameHeight,
rightBtn: [{
color: '#8B0000',
title: '备注'
}],
data: {
common: [{
placeholderImg: 'widget://res/img/ic/listContact.png',
img: 'https://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
title: '标题'
}],
A: [{
placeholderImg: 'widget://res/img/ic/listContact.png',
img: 'https://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}]
},
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
关闭listContact
close()
示例代码
var listContact = api.require('listContact');
listContact.close();
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
reloadData
刷新列表数据，若不传 data 则仅停止下拉刷新状态
reloadData({params})
params
data：
- 类型：JSON 对象
- 默认值：无
- 描述：（可选项）刷新的数据源，若不传则仅停止下拉刷新状态
内部字段：
{
common: [{ //区域标题，字符串类型
img: //（可选项）cell的头像，，支持http、https、widget、fs等网络和本地图片路径协议，网络图片会被缓存到本地
placeholderImg: //（可选项）头像,本地路径,加载网络图片时显示界面上的图，可为空
title: //（可选项）cell的标题，若subtitle为空时，title上下居中位置
subTitle: //（可选项）cell的子标题，为空时title上下居中显示
titleLocation //（可选项）标题在水平线上的位置center,left,right，默认left
titleSize //（可选项）标题字体的大小，默认12
titleColor //（可选项）标题字体的颜色值，默认黑色，支持 rgb，rgba，#
subTitleLocation //（可选项）子标题在水平线上的位置center,left,right默认left
subTitleSize //（可选项）子标题字体的大小，默认12
subTitleColor //（可选项）子标题字体的颜色值,默认黑色,支持 rgb，rgba，#
}],
A:[{}],
B:[{}],,,,,,
}
示例代码
var listContact = api.require('listContact');
listContact.reloadData({
data: {
common: [{
placeholderImg: 'widget://res/img/ic/listContact.png',
img: 'https://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
title: '标题'
}],
A: [{
placeholderImg: 'widget://res/img/ic/listContact.png',
img: 'https://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}, {
placeholderImg: 'widget://res/img/ic/listContact.png',
title: '标题'
}]
}
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setRefreshHeader
设置下拉刷新样式，通过reloadData收起下拉刷新组件
setRefreshHeader({params} ,callback(ret, err))
params
loadingImg：
- 类型：字符串
- 默认值：无
- 描述：下拉刷新的小箭头本地图片的路径
bgColor:
- 类型：字符串
- 默认值：#f5f5f5
- 描述：（可选项）下拉刷新视图的背景色
textColor：
- 类型：字符串
- 默认值：#8e8e8e
- 描述：（可选项）提示文字颜色
textDown：
- 类型：字符串
- 默认值：下拉可以刷新…
- 描述：（可选项）提示文字
textUp：
- 类型：字符串
- 默认值：松开开始刷新…
- 描述：（可选项）提示文字
showTime：
- 类型：布尔值
- 默认值：true
- 描述：（可选项）是否显示刷新时间
callback(ret, err)
返回触发刷新事件
示例代码
var listContact = api.require('listContact');
listContact.setRefreshHeader({
loadingImg: 'widget://res/img/ic/listContact_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系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏listContact列表视图
hide()
示例代码
var listContact = api.require('listContact');
listContact.hide();
补充说明
隐藏列表视图，并没有从内存里清除
可用性
iOS系统，Android系统
可提供的1.0.1及更高版本
show
显示列表视图
show()
示例代码
var listContact = api.require('listContact');
listContact.show();
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.1及更高版本
deleteItem
删除指定索引的数据
deleteItem({params})
params
index：
- 类型：数字
- 默认值：列表最后一条数据的索引
- 描述：（可选项）要删除的数据的索引
key：
- 类型：字符串
- 默认值：无
- 描述：要删除的数据所在的区域的key
示例代码
var listContact = api.require('listContact');
listContact.deleteItem({
index: 2,
key: A
});
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.2及更高版本
refreshItem
刷新指定index条目的数据
refreshItem({params})
params
index：
- 类型：数字
- 默认值：0
- 描述：（可选项）要刷新数据的item索引下标
key：
- 类型：字符串
- 默认值：无
- 描述：要刷新的数据所在的区域的key
data：
- 类型：JSON 对象
- 默认值：无
- 描述：要刷新的item的数据源
内部字段：
{
img: //（可选项）cell的头像图片路径，支持http、https、widget、fs等网络和本地图片路径协议，网络图片会被缓存到本地
placeholderImg: //（可选项）头像,本地路径,加载网络图片时显示界面上的图
title: //（可选项）cell的标题，若subtitle为空时，title上下居中位置
subTitle: //（可选项）cell的子标题，可为空，为空时title上下居中显示
titleLocation //（可选项）标题在水平线上的位置center,left,right，默认left
titleSize //（可选项）标题字体的大小，默认12
titleColor //（可选项）标题字体的颜色值，默认黑色，支持 rgb，rgba，#
subTitleLocation //（可选项）子标题在水平线上的位置center,left,right默认left
subTitleSize //（可选项）子标题字体的大小，默认12
subTitleColor //（可选项）子标题字体的颜色值,默认黑色, 支持 rgb，rgba，#
}
示例代码
var listContact = api.require('listContact');
listContact.refreshItem({
index: 2,
data: {
title: '刷新指定下标的标题',
subTitle: '刷新指定下标的子标题'
}
});
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.1及更高版本
insertItem
插入指定索引的数据
insertItem({params})
params
index：
- 类型：数字
- 默认值：列表最后一条数据的索引
- 描述：（可选项）要插入的item索引下标
key：
- 类型：字符串
- 默认值：无
- 描述：要插入的数据所在的区域的key
data：
- 类型：JSON 对象
- 默认值：无
- 描述：要插入的item的数据源
内部字段：
{
img: //（可选项）cell的头像图片路径，支持http、https、widget、fs等网络和本地图片路径协议，网络图片会被缓存到本地
placeholderImg: //（可选项）头像,本地路径,加载网络图片时显示界面上的图
title: //（可选项）cell的标题，若subtitle为空时，title上下居中位置
subTitle: //（可选项）cell的子标题，可为空，为空时title上下居中显示
titleLocation //（可选项）标题在水平线上的位置center,left,right，默认left
titleSize //（可选项）标题字体的大小，默认12
titleColor //（可选项）标题字体的颜色值，默认黑色，支持 rgb，rgba，#
subTitleLocation //（可选项）子标题在水平线上的位置center,left,right默认left
subTitleSize //（可选项）子标题字体的大小，默认12
subTitleColor //（可选项）子标题字体的颜色值,默认黑色, 支持 rgb，rgba，#
}
示例代码
var listContact = api.require('listContact');
listContact.insertItem({
index: 2,
data: {
img: 'widget://res/img/ic/listContact.jpg',
title: '12:00',
subTitle: 'APICloud粉丝互动会',
remark: '完成'
}
});
补充说明
无
可用性
iOS系统，Android系统
可提供的1.0.2及更高版本
scrollToItem
滚动到指定 index 条目
scrollToItem({params})
params
index：
- 类型：数字
- 描述：要滚动到的 item 的索引
key：
- 类型：字符串
- 描述：要滚动到的 item 所在的区域的 key
示例代码
var listContact = api.require('listContact');
listContact.scrollToItem({
index: 2,
key: 'B'
});
可用性
iOS系统，Android系统
可提供的1.0.1及更高版本