下载文档

uexListView
更新时间:2016-09-21

1、简介

列表插件

1.1、说明

Listview下拉列表,封装Listview扩展功能,AppCan官方 jssdk进一步对其扩展,封装了Listview列表组件:通过配合的样式,使开发者在界面中可以快速完成列表控件的开发
optionList带操作选项的列表组件:实现列表项可向左滑动后右侧显示隐藏内容,点击可进行自定义操作

1.2、UI展示

1.3、开源源码

插件测试用例与源码下载:点击 插件中心至插件详情页 (插件测试用例与插件源码已经提供)

2、API概览

2.1、方法

open 打开listview

uexListView.open(params);

说明:

在界面的指定位置显示listview。

参数:

  1. var params = {
  2. x:,//必选,x坐标
  3. y:,//必选,y坐标
  4. w:,//必选,宽度
  5. h://必选,高度
  6. }

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params = {
  2. "x": 0,
  3. "y": 100,
  4. "w":250,
  5. "h":400
  6. };
  7. uexListView.open(JSON.stringify(params));

close 关闭listview视图

uexListView.close();

说明:

关闭listview视图

参数:

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.close();

setItems 设置listview列表项数据

uexListView.setItems(params);
说明:

设置listview列表项数据,首次加载setItems必须在open之前
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

params:(String类型) 必选listview每一个条目数据的集合。该字符串为JSON格式。如下:

  1. var params = {
  2. "listItems":[//必选,listview列表项数据数组
  3. {
  4. "image":,//必选,列表项头像
  5. "placeholderImg":,//可选,头像占位图片
  6. "title":,//必选,标题
  7. "subtitle":,//必选,子标题
  8. "rightBtnImg":,//可选,右侧按钮图片。(暂不支持)
  9. "titleSize":,//可选,标题字体大小
  10. "titleColor":,//可选,标题字体颜色
  11. "subtitleSize":,//可选,子标题字体大小
  12. "subtitleColor":,//可选,子标题字体颜色
  13. "selectedBackgroundColor":,//可选,选中背景色
  14. "backgroundColor":,//可选,背景色
  15. "height"://可选,列表项高度
  16. }
  17. ],
  18. "rightSwipeOptionItem":{//可选,左滑右边的按钮
  19. "backgroundColor":,//可选,按钮所在列表项背景色
  20. "optionBtn":[//必选,左右按钮数据数组
  21. {
  22. "btnIndex":,//必选,按钮唯一标识
  23. "text":,//必选,按钮文本
  24. "textColor":,//可选,按钮文本颜色
  25. "textSize":,//可选,按钮文本大小
  26. "bgColor"://可选,按钮背景色
  27. }
  28. ]
  29. },
  30. "leftSwipeOptionItem":{//可选,右滑左边的按钮
  31. "backgroundColor":,//可选,按钮所在列表项背景色
  32. "optionBtn":[//必选,左右按钮数据数组
  33. {
  34. "btnIndex":,//必选,按钮唯一标识
  35. "text":,//必选,按钮文本
  36. "textColor":,//可选,按钮文本颜色
  37. "textSize":,//可选,按钮文本大小
  38. "bgColor"://可选,按钮背景色
  39. }
  40. ]
  41. }
  42. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params = {
  2. "listItems":[
  3. {
  4. "image": "res://icon.png",
  5. "placeholderImg":"res://icon.png",
  6. "title": "标题",
  7. "subtitle":"子标题",
  8. "rightBtnImg": "res://ac_title_btn_hov.png",
  9. "titleSize": 10,
  10. "titleColor":"#006000",
  11. "subtitleSize": 10,
  12. "subtitleColor":"#000000",
  13. "selectedBackgroundColor":"#006000",
  14. "backgroundColor":"#FFFFFF",
  15. "height":100
  16. }
  17. ],
  18. "rightSwipeOptionItem":{
  19. "backgroundColor":"#ffffff",
  20. "optionBtn":[
  21. {
  22. "btnIndex": "1",
  23. "text": "分享",
  24. "textColor":"#ffffff",
  25. "textSize":10,
  26. "bgColor":"#6F00D2"
  27. }
  28. ]
  29. },
  30. "leftSwipeOptionItem":{
  31. "backgroundColor":"#ffffff",
  32. "optionBtn":[
  33. {
  34. "btnIndex": "1",
  35. "text": "分享",
  36. "textColor":"#ffffff",
  37. "textSize":10,
  38. "bgColor":"#6F00D2"
  39. }
  40. ]
  41. }
  42. };
  43. uexListView.setItems(JSON.stringify(params));

deleteItemsAt 删除指定位置的数据

uexListView.deleteItemsAt(params);

说明:

删除指定位置的数据

参数:

params:(String类型) 必选listview列表项索引的数组。该字符串为JSON格式,如下:

  1. var params = {
  2. "itemIndex":[]//必选,列表项的位置索引集合
  3. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params = {
  2. "itemIndex":[0, 1]
  3. };
  4. uexListView.deleteItemsAt(JSON.stringify(params));

insertItemAt 插入数据到指定位置

uexListView.insertItemAt(params);

说明:

插入数据到指定位置
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

params:(String类型) 必选要插入listview数据的集合。该字符串为JSON格式,如下:

  1. var params ={
  2. "itemIndex":1,//必选,要插入的位置索引
  3. "listItem":{//必选,数据
  4. "image": ,//必选,列表项头像
  5. "placeholderImg":,//可选,头像占位图片
  6. "title":,//必选,标题
  7. "subtitle":,//必选,子标题
  8. "rightBtnImg":",//可选,右侧按钮图片。(暂不支持)
  9. "titleSize":,//可选,标题字体大小
  10. "titleColor":,//可选,标题字体颜色
  11. "subtitleSize":,//可选,子标题字体大小
  12. "subtitleColor":,//可选,子标题字体颜色
  13. "selectedBackgroundColor":,//可选,选中背景色
  14. "backgroundColor":,//可选,背景色
  15. "height"://可选,列表项高度
  16. }
  17. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params ={
  2. "itemIndex":1,
  3. "listItem":{
  4. "image": "res://icon.png",
  5. "placeholderImg":"res://1Normal.png",
  6. "title": "标题",
  7. "subtitle":"子标题",
  8. "rightBtnImg": "res://ac_title_btn_hov.png",
  9. "titleSize": 10,
  10. "titleColor":"#006000",
  11. "subtitleSize": 10,
  12. "subtitleColor":"#000000",
  13. "selectedBackgroundColor":"#006000",
  14. "backgroundColor":"#FFFFFF",
  15. "height":100
  16. }
  17. };
  18. uexListView.insertItemAt(JSON.stringify(params));

appendItems 加载数据

uexListView.appendItems(params)

说明:

加载数据到listview尾部
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

params:(String类型) 必选要插入listview列表项数据的集合。该字符串为JSON格式,如下:

  1. var params = {
  2. "listItems":[//必选,listview列表项数据数组
  3. {
  4. "image":,//必选,列表项头像
  5. "placeholderImg":,//可选,头像占位图片
  6. "title":,//必选,标题
  7. "subtitle":,//必选,子标题
  8. "rightBtnImg":,//可选,右侧按钮图片。(暂不支持)
  9. "titleSize":,//可选,标题字体大小
  10. "titleColor":,//可选,标题字体颜色
  11. "subtitleSize":,//可选,子标题字体大小
  12. "subtitleColor":,//可选,子标题字体颜色
  13. "selectedBackgroundColor":,//可选,选中背景色
  14. "backgroundColor":,//可选,背景色
  15. "height"://可选,列表项高度
  16. }
  17. ]
  18. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params = {
  2. "listItems":[
  3. {
  4. "image": "res://icon.png",
  5. "placeholderImg":"res://1Normal.png",
  6. "title": "标题",
  7. "subtitle":"子标题",
  8. "rightBtnImg": "res://ac_title_btn_hov.png",
  9. "titleSize": 20,
  10. "titleColor":"#006000",
  11. "subtitleSize": 10,
  12. "subtitleColor":"#000000",
  13. "selectedBackgroundColor":"#006000",
  14. "backgroundColor":"#FFFFFF",
  15. "height":100
  16. }
  17. ]
  18. };
  19. uexListView.appendItems(JSON.stringify(params));

reloadItems 刷新数据

uexListView.reloadItems(params)

说明:

刷新listview,清除当前数据,加载新数据
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

params:(String类型) 必选要刷新数据的集合。该字符串为JSON格式,如下:

  1. var params = {
  2. "listItems":[//必选,listview列表项数据数组
  3. {
  4. "image":,//必选,列表项头像
  5. "placeholderImg":,//可选,头像占位图片
  6. "title":,//必选,标题
  7. "subtitle":,//必选,子标题
  8. "rightBtnImg":,//可选,右侧按钮图片。(暂不支持)
  9. "titleSize":,//可选,标题字体大小
  10. "titleColor":,//可选,标题字体颜色
  11. "subtitleSize":,//可选,子标题字体大小
  12. "subtitleColor":,//可选,子标题字体颜色
  13. "selectedBackgroundColor":,//可选,选中背景色
  14. "backgroundColor":,//可选,背景色
  15. "height"://可选,列表项高度
  16. }
  17. ]
  18. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params = {
  2. "listItems":[
  3. {
  4. "image": "res://icon.png",
  5. "placeholderImg":"res://1Normal.png",
  6. "title": "标题",
  7. "subtitle":"子标题",
  8. "rightBtnImg": "res://ac_title_btn_hov.png",
  9. "titleSize": 20,
  10. "titleColor":"#006000",
  11. "subtitleSize": 10,
  12. "subtitleColor":"#000000",
  13. "selectedBackgroundColor":"#006000",
  14. "backgroundColor":"#FFFFFF",
  15. "height":100
  16. }
  17. ]
  18. };
  19. uexListView.reloadItems(JSON.stringify(params));

setItemSwipeType 设置侧滑类型

uexListView.setItemSwipeType(type);

说明:

设置listview侧滑类型。

参数:

参数名称 参数类型 是否必选 说明
type Number 侧滑类型值,取值范围参考SwipeType

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.setItemSwipeType(2);

setPullRefreshHeader 设置下拉刷新样式

uexListView.setPullRefreshHeader(params);

说明:

设置listview下拉刷新样式。
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

  1. var params ={
  2. PullRefreshHeaderStyle:{//必选,下拉刷新样式集合
  3. "arrowImage":,//可选,下拉图片
  4. "backGroundColor":,//可选,下拉背景色
  5. "textColor":,//可选,字体颜色
  6. "textFontSize":,//可选,字体大小
  7. "pullRefreshNormalText":,//必选,下拉时文本
  8. "pullRefreshPullingText":,//必选,松开时文本
  9. "pullRefreshLoadingText":,//必选,加载中文本
  10. "isShowUpdateDate"://必选,是否显示更新日期(0:不显示,1:显示)。安卓和ios格式不一样
  11. }
  12. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params ={
  2. PullRefreshHeaderStyle:{
  3. "arrowImage":"res://1Normal.png",
  4. "backGroundColor":"#e2e7ed",
  5. "textColor":"#576c89",
  6. "textFontSize":20,
  7. "pullRefreshNormalText":"下拉可以刷新",
  8. "pullRefreshPullingText":"松开即可刷新",
  9. "pullRefreshLoadingText":"加载中...",
  10. "isShowUpdateDate":1
  11. }
  12. };
  13. uexListView.setPullRefreshHeader(JSON.stringify(params));

setPullRefreshFooter 设置上拉加载样式

uexListView.setPullRefreshFooter(params);

说明:

设置listview上拉加载样式。
图片路径支持 wgt:// wgts:// res:// file:// 路径协议详见CONSTANT中 PathTypes
参数:

params:(String类型) 必选加载样式的集合。该字符串为JSON格式,如下:

  1. var params ={
  2. PullRefreshFooterStyle:{//必选,上拉加载样式集合
  3. "arrowImage":,//可选,上拉图片
  4. "backGroundColor":,//可选,上拉背景色
  5. "textColor":,//可选,字体颜色
  6. "textFontSize":,//可选,字体大小
  7. "pullRefreshNormalText":,//必选,上拉时文本
  8. "pullRefreshPullingText":,//必选,松开时文本
  9. "pullRefreshLoadingText":,//必选,加载中文本
  10. "isShowUpdateDate"://必选,是否显示日期(0:不显示,1:显示)。
  11. }
  12. };

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. var params ={
  2. PullRefreshFooterStyle:{
  3. "arrowImage":"res://1Normal.png",
  4. "backGroundColor":"#e2e7ed",
  5. "textColor":"#576c89",
  6. "textFontSize":13,
  7. "pullRefreshNormalText":"上拉加载更多",
  8. "pullRefreshPullingText":"松开即可加载更多",
  9. "pullRefreshLoadingText":"加载中...",
  10. "isShowUpdateDate":1
  11. }
  12. };
  13. uexListView.setPullRefreshFooter(JSON.stringify(params));

2.2、监听方法

onItemClick 点击列表项的监听方法

uexListView.onItemClick(itemIndex);

说明:

点击列表项的监听方法。

参数:

参数名称 参数类型 是否必选 说明
itemIndex Number 被点击列表项的索引

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.onItemClick = function(itemIndex){
  2. alert("onItemClick:" + itemIndex);
  3. };

onLeftOptionButtonInItem 点击左边按钮的监听方法

uexListView.onLeftOptionButtonInItem(itemIndex,optionBtnIndex);

说明:

点击左边按钮的监听方法。

参数:

参数名称 参数类型 是否必选 说明
itemIndex Number 被点击按钮所在列表项的索引
optionBtnIndex Number 被点击按钮的索引

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.onLeftOptionButtonInItem = function(itemIndex, optionBtnIndex){
  2. alert("onLeftOptionButtonInItem:" + itemIndex + "," + optionBtnIndex);
  3. };

onRightOptionButtonInItem 点击右边按钮的监听方法

uexListView.onRightOptionButtonInItem(itemIndex,optionBtnIndex);

说明:

点击右边按钮的监听方法。

参数:

参数名称 参数类型 是否必选 说明
itemIndex Number 被点击按钮所在列表项的索引
optionBtnIndex Number 被点击按钮的索引

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.onRightOptionButtonInItem = function(itemIndex, optionBtnIndex){
  2. alert("onRightOptionButtonInItem:" + itemIndex + "," + optionBtnIndex);
  3. };

ontPullRefreshHeaderListener 下拉刷新的监听方法

uexListView.ontPullRefreshHeaderListener(status);

说明:

下拉刷新的监听方法。

参数:

参数名称 参数类型 是否必选 说明
status Number 刷新状态码(0:开始刷新,1:刷新中,2:刷新完成)

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.ontPullRefreshHeaderListener = function(status){
  2. alert("ontPullRefreshHeaderListener:" + status);
  3. };

ontPullRefreshFooterListener 上拉加载的监听方法

uexListView.ontPullRefreshFooterListener(status);

说明:

上拉加载的监听方法

参数:

参数名称 参数类型 是否必选 说明
status Number 刷新状态码(0:开始刷新,1:刷新中,2:刷新完成)

平台支持:

Android2.2+
iOS6.0+

版本支持:

3.0.0+

示例:

  1. uexListView.ontPullRefreshFooterListener = function(status){
  2. alert("ontPullRefreshFooterListener:" + status);
  3. };

3、更新历史

iOS

API版本:uexListView-3.0.7

最近更新时间:2015-12-26

历史发布版本 更新内容
3.0.7 添加IDE支持
3.0.6 未满全屏时去掉多余的行
3.0.5 修复关闭窗口后再次打开界面会卡死的问题
3.0.4 删除接口与Android做统一处理
3.0.3 修复调用删除接口无效的bug
3.0.2 修复加载图片大小不统一的bug
3.0.1 修复上拉加载时内容加载太快,右滑时出现红色 背景的bug
3.0.0 Listview下拉列表,封装Listview扩展功能

Android

API版本:uexListView-3.0.10

最近更新时间:2016-4-16

历史发布版本 更新内容
3.0.10 删除universalimageloader源码
3.0.9 修复plugin.xml
3.0.7 修复listview加载网络图片显示不正常的问题
3.0.6 修复listview侧滑按钮显示不正常的问题
3.0.5 修复listview不能随页面关闭的问题
3.0.4 更新适配机型使用的方法
3.0.3 修复点击打开,再点击删除 插件崩溃的问题, 修复左滑或右滑list时不只显示一个删除和一个分享的问题
3.0.2 修复list条目不足时不能上拉加载的问题
3.0.1 修复下拉刷新内容不正确的问题, 修复list列表中的图标不及时刷新的问题, 修复删除后再次打开无反应的问题
3.0.0 Listview下拉列表,封装Listview扩展功能

4、附录

SwipeType

type 说明
0 可以向右滑动
1 可以向左滑动
2 左右都可以滑动
3 左右都不能滑动