UIListMeeting 插件封装了一个数据列表控件,列表项水平侧滑可出现控制按钮;开发者可自定义列表的数据源,及列表的样式,支持列表项的增、删、改、查,支持批量更新、追加数据,支持下拉刷新和上拉加载事件。UIListMeeting 插件是基于 UIListView 插件修改的。UIListView插件的源码开源地址为:https://github.com/apicloudcom/UIListView
打开 UIListMeeting 插件
open({params}, callback(ret, err))
rect:
{
x: 0, //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
y: 0, //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
w: 320, //(可选项)数字类型;插件的宽度;默认值:所属的 Window 或 Frame 的宽度
h: 480 //(可选项)数字类型;插件的高度;默认值:所属的 Window 或 Frame 的高度
}
data:
[{
head: '', //(可选项)字符串类型;头像上的文字,若为空则不显示文字
headBg: '', //(可选项)字符串类型;头像背景色,支持rgb、rgba、#;默认:#ff0000
name: '', //字符串类型;会议员名字
title: '', //字符串类型;会议员职位
status: '', //(可选项)字符串类型;状态图标地址,要求本地路径(widget、fs),若不传则不显示
mark: '', //(可选项)字符串类型;右侧备注的图标路径,要求本地路径(widget、fs),若不传则不显示
rightBtns: [] //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]
rightBtns:
data
数组的指定项传入 rightBtns
参数[{
bgColor: '#388e8e', //(可选项)字符串类型;按钮背景色,支持 rgb、rgba、#;默认:'#388e8e'
activeBgColor: '', //(可选项)字符串类型;按钮按下时的背景色,支持 rgb、rgba、#;默认:#388e8e
width: 40, //(可选项)数字类型;按钮的宽度;默认:40
title: '', //(可选项)字符串类型;按钮标题,水平、垂直居中,若不传则不显示
titleSize: 12, //(可选项)数字类型;按钮标题文字大小;默认:12
titleColor: '#fff', //(可选项)字符串类型;按钮标题文字颜色,支持 rgb、rgba、#;默认:'#ffffff'
icon: '', //(可选项)字符串类型;按钮标题前的图标路径(本地路径,支持fs://、widget://),水平、垂直居中,图标为正方形,若不传则不显示
iconWidth: 20 //(可选项)数字类型;按钮标题前的图标宽度,图标为正方形;默认:20
}]
bounces:
styles:
{
border: { //(可选项)JSON 对象;分割线配置
color: '#696969', //(可选项)字符串类型;列表分割线的颜色,支持 rgb、rgba、#;默认:'#696969'
width: 0.5 //(可选项)数字类型;分割线粗细;默认:0.5
}
item: { //(可选项)JSON对象;列表项的样式
bgColor: '#AFEEEE', //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#AFEEEE'
activeBgColor: '#F5F5F5', //(可选项)字符串类型;列表项按下时的背景色,支持 rgb、rgba、#;默认:'#F5F5F5'
height: 50, //(可选项)数字类型;列表项的高度;默认:50
headSize: 30, //(可选项)数字类型;头像的大小(直径);默认:30
nameSize: 14, //(可选项)数字类型;列表项名字文字大小;默认:14
nameColor: '#000', //(可选项)字符串类型;列表项名字文字颜色,支持 rgb,rgba,#;默认:'#000000'
nameWidth: 30, // (可选项)字符串类型;名字文本标签的宽度,默认:30
titleSize: 12, //(可选项)数字类型;列表项子职位文字大小;默认:12
titleColor: '#000', //(可选项)字符串类型:列表项职位文字颜色,支持 rgb、rgba、#;默认:'#000000'
titleWidth: 40, // (可选项) 数字类型;标题文本标签的宽度;默认:40
statusSize: 20, //(可选项)数字类型;状态图标的大小(正方形边长);默认:20
markSize: 20 //(可选项)数字类型;备注图标的大小(正方形边长);默认:20
}
}
fixedOn:
showScrollBar:
ret:
{
id:1,
eventType: 'show', //字符串类型;交互事件类型
//取值范围如下:
//show(插件加载成功事件)
//clickRightBtn(点击侧滑出现的右侧按钮事件)
//clickContent(点击列表项的内容事件)
index: 0, //数字类型;列表项的索引
btnIndex: 0 //数字类型;列表项侧滑出现的按钮的索引
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.open({
rect: {
x: 10,
y: 20,
w: api.winWidth-20,
h: api.frameHeight-170
},
data: [{
uid: '1001',
head: '华',
headBg: '#ff0000',
name: '德华',
title: '歌手',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}, {
uid: '1002',
head: '友',
headBg: '#ff34b3',
name: '学友',
title: '歌手',
status: 'fs://meeting/ring1.png',
mark: 'fs://meeting/record1.png'
}, {
uid: '1003',
head: '黎',
headBg: '#ffd700',
name: '黎明',
title: '歌手',
status: 'fs://meeting/ring2.png',
mark: 'fs://meeting/record2.png'
}, {
uid: '1004',
head: '成',
headBg: '#fa8072',
name: '富成',
title: '歌手',
status: 'fs://meeting/ring3.png',
mark: 'fs://meeting/record3.png'
}, {
uid: '1005',
head: '含',
headBg: '#ff00ff',
name: '韩寒',
title: '粉丝',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}, {
uid: '1006',
head: '郭',
headBg: '#cdcd00',
name: '敬明',
title: '粉丝',
status: 'fs://meeting/ring2.png',
mark: 'fs://meeting/record2.png'
}, {
uid: '1007',
head: '布',
headBg: '#a2b5cd',
name: '布什',
title: '屌丝',
status: 'fs://meeting/ring1.png',
mark: 'fs://meeting/record1.png'
}, {
uid: '1008',
head: '森',
headBg: '#b8860b',
name: '小森',
title: '屌丝',
status: 'fs://meeting/ring4.png',
mark: 'fs://meeting/record4.png'
}],
rightBtns: [{
bgColor: '#CD3700',
activeBgColor: '',
width: 40,
title: '删除',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
},{
bgColor: '#CD950C',
activeBgColor: '',
width: 40,
title: '禁言',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
},{
bgColor: '#C7C7C7',
activeBgColor: '',
width: 40,
title: '取消',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
}],
styles: {
border: {
color: '#000',
width: 0.5
},
item: {
bgColor: '#F5F5F5',
activeBgColor: '#ffffff',
height: 50.0,
headSize: 30,
nameSize: 14,
nameColor: '#000',
titleSize: 12.0,
titleColor: '#ff0000',
statusSize: 20.0,
markSize: 20,
}
},
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及更高版本
重设 UIListMeeting 插件的位置和大小(rect)
resetRect({params})
id:
rect:
{
x: 0, //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:原值
y: 0, //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:原值
w: 320, //(可选项)数字类型;插件的宽度;默认值:原值
h: 480 //(可选项)数字类型;插件的高度;默认值:原值
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.resetRect({
id:1,
rect: {
x: 10,
y: 20,
w: api.winWidth-20,
h: api.frameHeight-170
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
关闭数据列表插件
close({params})
id:
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.close({
id: 1
});
iOS系统,Android系统
可提供的1.0.0及更高版本
显示 UIListMeeting 插件
show({params})
id:
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.show({
id:1
});
iOS系统,Android系统
可提供的1.0.0及更高版本
隐藏 UIListMeeting 插件
hide({params})
id:
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.hide({
id:1
});
iOS系统,Android系统
可提供的1.0.0及更高版本
根据开发者自定义的唯一标识(open 接口的 data 参数中自定义的唯一标识)查找列表项对应的数据
getIndex({params}, callback(ret, err))
id:
key:
value:
ret:
{
index: 0, //数字类型;当前列表项的索引
data: [] //数组类型;当前列表项的数据,内部字段与 open 时的 data 参数一致
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.getIndex({
id:1,
key: 'uid',
value: '1001'
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
根据列表项的索引获取对应的数据
getDataByIndex({params}, callback(ret, err))
id:
index:
ret:
{
data: [] //数组类型;当前列表项的数据,内部字段与 open 时的 data 参数一致
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.getDataByIndex({
id:1,
index: 0
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
设置侧滑显示出来的按钮
setSwipeBtns({params}, callback(ret, err))
id:
index:
btns:
[{
bgColor: '#388e8e', //(可选项)字符串类型;按钮背景色,支持 rgb、rgba、#;默认:'#388e8e'
activeBgColor: '', //(可选项)字符串类型;按钮按下时的背景色,支持 rgb、rgba、#;默认:#388e8e
width: 40, //(可选项)数字类型;按钮的宽度;默认:40
title: '', //(可选项)字符串类型;按钮标题,水平、垂直居中,若不传则不显示
titleSize: 12, //(可选项)数字类型;按钮标题文字大小;默认:12
titleColor: '#fff', //(可选项)字符串类型;按钮标题文字颜色,支持 rgb、rgba、#;默认:'#ffffff'
icon: '', //(可选项)字符串类型;按钮标题前的图标路径(本地路径,支持fs://、widget://),水平、垂直居中,图标为正方形,若不传则不显示
iconWidth: 20 //(可选项)数字类型;按钮标题前的图标宽度,图标为正方形;默认:20
}]
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.setSwipeBtns({
id:1,
index: 0,
btns: [{
bgColor: '#CD3700',
activeBgColor: '',
width: 40,
title: '删除',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
},{
bgColor: '#CD950C',
activeBgColor: '',
width: 40,
title: '禁言',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
}]
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
刷新列表数据
reloadData({params}, callback(ret, err))
id:
data:
[{
head: '', //(可选项)字符串类型;头像上的文字,若为空则不显示文字
headBg: '', //(可选项)字符串类型;头像背景色,支持rgb、rgba、#;默认:#ff0000
name: '', //字符串类型;会议员名字
title: '', //字符串类型;会议员职位
status: '', //(可选项)字符串类型;状态图标地址,要求本地路径(widget、fs),若不传则不显示
mark: '', //(可选项)字符串类型;右侧备注的图标路径,要求本地路径(widget、fs),若不传则不显示
rightBtns: [] //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.reloadData({
id:1,
data: [{
uid: '1001',
head: '华',
headBg: '#ff0000',
name: '建华',
title: '歌手',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}, {
uid: '1002',
head: '友',
headBg: '#ff34b3',
name: '友朋',
title: '歌手',
status: 'fs://meeting/ring1.png',
mark: 'fs://meeting/record1.png'
}, {
uid: '1003',
head: '黎',
headBg: '#ffd700',
name: '王明',
title: '歌手',
status: 'fs://meeting/ring2.png',
mark: 'fs://meeting/record2.png'
}, {
uid: '1004',
head: '成',
headBg: '#fa8072',
name: '打成',
title: '歌手',
status: 'fs://meeting/ring3.png',
mark: 'fs://meeting/record3.png'
}, {
uid: '1005',
head: '含',
headBg: '#ff00ff',
name: '哲民',
title: '粉丝',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}, {
uid: '1006',
head: '郭',
headBg: '#cdcd00',
name: '台明',
title: '粉丝',
status: 'fs://meeting/ring2.png',
mark: 'fs://meeting/record2.png'
}, {
uid: '1007',
head: '布',
headBg: '#a2b5cd',
name: '小布',
title: '屌丝',
status: 'fs://meeting/ring1.png',
mark: 'fs://meeting/record1.png'
}]
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
根据索引删除某一条列表的数据
deleteItem({params}, callback(ret, err))
id:
index:
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.deleteItem({
id:1,
index: 2
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
根据索引更新某一条列表的数据
updateItem({params}, callback(ret, err))
id:
index:
data:
{
head: '', //(可选项)字符串类型;头像上的文字,若为空则显示原数据
headBg: '', //(可选项)字符串类型;头像背景色,支持rgb、rgba、#,若为空则显示原数据
name: '', //字符串类型;会议员名字,若为空则显示原数据
title: '', //字符串类型;会议员职位,若为空则显示原数据
status: '', //(可选项)字符串类型;状态图标地址,要求本地路径(widget、fs),若为空则显示原数据
mark: '' //(可选项)字符串类型;右侧备注的图标路径,要求本地路径(widget、fs),若为空则显示原数据
}
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.updateItem({
id:1,
index: 2,
data: {
uid: '1002',
head: '冰',
headBg: '#a2b5cd',
name: '冰冰',
title: '屌丝',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
根据索引向某一条列表插入数据
insertItem({params}, callback(ret, err))
id:
index:
data:
{
head: '', //(可选项)字符串类型;头像上的文字,若为空则不显示文字
headBg: '', //(可选项)字符串类型;头像背景色,支持rgb、rgba、#;默认:#ff0000
name: '', //字符串类型;会议员名字
title: '', //字符串类型;会议员职位
status: '', //(可选项)字符串类型;状态图标地址,要求本地路径(widget、fs),若不传则不显示
mark: '', //(可选项)字符串类型;右侧备注的图标路径,要求本地路径(widget、fs),若不传则不显示
rightBtns: [] //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.insertItem({
id:1,
index: 2,
data: {
uid: '1001',
head: '鑫',
headBg: '#ff0000',
name: '刘鑫',
title: 'CEO',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
向列表末端追加数据
appendData({params}, callback(ret, err))
id:
data:
[{
head: '', //(可选项)字符串类型;头像上的文字,若为空则不显示文字
headBg: '', //(可选项)字符串类型;头像背景色,支持rgb、rgba、#;默认:#ff0000
name: '', //字符串类型;会议员名字
title: '', //字符串类型;会议员职位
status: '', //(可选项)字符串类型;状态图标地址,要求本地路径(widget、fs),若不传则不显示
mark: '', //(可选项)字符串类型;右侧备注的图标路径,要求本地路径(widget、fs),若不传则不显示
rightBtns: [] //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]
ret:
{
status: true //布尔型;true||false
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.appendData({
id:1,
data: [{
uid: '1011',
head: '强',
headBg: '#ff0000',
name: '小强',
title: '屌丝',
status: 'fs://meeting/ring0.png',
mark: 'fs://meeting/record0.png'
}, {
uid: '1012',
head: '达',
headBg: '#ff34b3',
name: '邹达',
title: 'CT0',
status: 'fs://meeting/ring1.png',
mark: 'fs://meeting/record1.png'
}],
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
iOS系统,Android系统
可提供的1.0.0及更高版本
获取当前列表的总数据量
getCount(callback(ret, err))
id:
ret:
{
count: 21 //数字类型;当前列表包含的数据总数
}
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.getCount({
id:1
},function(ret) {
api.alert({
msg: JSON.stringify(ret)
})
});
iOS系统,Android系统
可提供的1.0.0及更高版本
设置下拉刷新,通过 reloadData 收起下拉刷新组件
setRefreshHeader({params}, callback(ret, err))
id:
loadingImg:
bgColor:
textColor:
textDown:
textUp:
showTime:
下拉刷新的事件回调
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.setRefreshHeader({
id:1,
loadingImg: 'widget://res/UIListMeeting_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及更高版本
设置上拉加载,通过 appendData 收起上拉加载组件
setRefreshFooter({params}, callback(ret, err))
id:
loadingImg:
bgColor:
textColor:
textUp:
textDown:
showTime:
上拉加载的事件回调
var UIListMeeting = api.require('UIListMeeting');
UIListMeeting.setRefreshFooter({
id:1,
loadingImg: 'widget://res/UIListMeeting_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系统,Android系统
可提供的1.0.0及更高版本