overviewList

来自于:开发者立即使用

open setFrame getIndex getData setRightButtons close reloadData deleteItem insertItem refreshItem appendData setRefreshHeader setRefreshFooter show hide

概述

overviewList封装了一个列表控件,可实现一个可左右拖动item的列表视图。开发者可根据需求自定义列表的元素布局,亦可自定义相关字段的样式。支持设置下拉刷新和上拉加载更多事件。支持删除、刷新、插入指定下标(index)的item数据。可动态设置item侧滑按钮图标、头像。本模块是由第三方模块开发者提供,使用本模块需在线云编译安装包。

open

打开

open({params}, callback(ret, err))

params

x:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)列表视图的左上角点的坐标

y:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)列表视图的左上角点的坐标

w:

  • 类型:数字
  • 默认值:当前设备屏幕宽度
  • 描述:(可选项)列表视图的宽

h:

  • 类型:数字
  • 默认值:w+100
  • 描述:(可选项)列表视图的高

itemStyle:

  • 类型:JSON 对象
  • 默认值:见内部字段
  • 描述:(可选项)item样式配置
  • 内部字段:
  1. {
  2. borderColor: //(可选项)item间分割线颜色,支持 rgb,rgba,#,默认#696969
  3. bgColor: //(可选项)item背景色,支持 rgb,rgba,#,默认#AFEEEE
  4. selectedColor // (可选项)item背景选中色,支持 rgb,rgba,#,默认#f5f5f5
  5. height: //(可选项)一条item的高度,数字类型,默认55
  6. avatarH //(可选项)头像(上下居中)的高(不可超过height),数字类型,默认45
  7. avatarW: //(可选项)头像(距左边框距离和上下相等)的宽,数字类型,默认45
  8. placeholderImg //(可选项)头像为网络资源时的占位图,仅支持本地路径协议,有默认图标
  9. titleSize //(可选项)标题字体大小,数字类型,默认16
  10. titleColor //(可选项)标题字体颜色,支持 rgb,rgba,#,默认:#000000
  11. subTitleSize //(可选项)子标题字体大小,数字类型,默认13
  12. subTitleColor //(可选项)子标题字体颜色,支持 rgb,rgba,#,默认:#000000
  13. timeSize //(可选项)子标题字体大小,数字类型,默认13
  14. timeColor //(可选项)子标题字体颜色,支持 rgb,rgba,#,默认:#000000
  15. itemSlipDistance://(可选项)向左滑动露出右边按钮时,item的滑动距离咱item宽的百分比,默认50,取值范围30-100
  16. }

datas:

  • 类型:数组对象
  • 默认值:无
  • 描述:列表视图数据源
  • 内部字段:
  1. [{
  2. img: //(可选项)头像图片路径,支持本地和网络路径资源,网络图片会被缓存到本地
  3. title: //(可选项)标题,字符串类型
  4. subTitle //(可选项)子标题,字符串类型
  5. time // (可选项)时间点, 字符串
  6. rightBtn //(可选项)数组对象,往左滑动item露出的按钮信息组成的数组,无默认值,不传时表示item不可向左滑动
  7. 内部字段:
  8. [{
  9. bg: //(可选项)按钮背景色,支持 rgb,rgba,#,默认#388e8e
  10. title: //(可选项)按钮标题,字符串类型,默认空字符串
  11. titleSize: //(可选项)按钮标题字体大小,数字类型,默认12
  12. titleColor: //(可选项)按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  13. highlightColor: //(可选项)按钮选中时的颜色值,支持 rgb,rgba,#
  14. icon //(可选项)按钮标题前图标图片路径,图标大小20*20,默认无,支持本地协议路径,如widget://、fs://等
  15. }]
  16. }]

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

callback(ret, err)

ret:

  • 类型:JSON 对象

内部字段:

  1. {
  2. eventType: //事件类型,取值范围如下:
  3. rightBtn //点击右边按钮
  4. content //点击的item内容
  5. avatar //点击的item的头像
  6. index: //点击item的下标
  7. data //当前操作的item的数据,内部字段与open里datas元素一致
  8. rightBtn //点击item下的侧滑按钮,eventType非rightBtn时此字段无意义
  9. //内部字段:{
  10. index //按钮下标,数字类型,从右向左顺序排列
  11. selected//布尔类型,按钮点击状态,true为点击状态,false为取消点击/未点击状态
  12. }
  13. }

示例代码

  1. var overviewList = api.require('overviewList');
  2. var datas = []; // 数据源.
  3. var imgs = ['widget://image/overviewList/avatar.png',
  4. 'widget://image/overviewList/avatar.png',
  5. 'widget://image/overviewList/avatar.png',
  6. 'widget://image/overviewList/avatar.png',
  7. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/948bec8a4df2adb27581319d8a8c014e.png',
  8. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3cd8bd01f9f474664ff0b2f41611797e.png',
  9. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/5b67af4da9ce31f101c3326fbef10e5e.png',
  10. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3531bbb5db7f920a4f17887449aa5d7d.png',
  11. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/cbf1074f44df8e0f40ca277e31f559ce.png',
  12. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/87a9ad42f49140f1168b0caebf0cb6c3.png',
  13. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/da1cdf8ecba5775f8b54f12cd2a00735.png',
  14. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/a4db2d1809fa57cc91d0173e1c33caf9.png',
  15. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3e0afb28a7cb0437ea860087cef39fd3.png',
  16. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/893e222cdd8158391f7a01aee3723784.png',
  17. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/59ea90c458f3708279de79b0c7a60693.png',
  18. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/69bff6064593e92c8e4102f174d0bdbf.png',
  19. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/ca2aa9b8246bc0bfd97ba284dc087e62.png',
  20. 'http://file.apicloud.com/mcm/A6965066817858/d7d1d308fe165b984c09728e7118e9f1.jpg',
  21. 'http://file.apicloud.com/mcm/A6965066817858/83dede361c4597ccfe2d815a76a7b1c2.png',
  22. 'http://file.apicloud.com/mcm/A6965066817858/f23301da3bd6c2c214a464b27c9897c2.jpg'
  23. ];
  24. for (var i = 0; i < 20; i++) { // 使用1000条数据,进行极限测试.
  25. var data = {
  26. uId: 1000 + i,
  27. img: imgs[i], // 头像图片路径,支持本地和网络路径
  28. title: '刘德华' + i, // 标题.
  29. subTitle: '100' + i, // 子标题.
  30. time: '10' + i,
  31. rightBtn: [{
  32. bg: '#556B2F', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  33. title: '结束', //按钮名字,字符串类型,默认‘按钮’
  34. titleSize: 13, //按钮标题大小,默认12
  35. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  36. selectedColor: '#FFFFFF', //按钮选中时候的颜色值,支持 rgb,rgba,#
  37. icon: 'widget://image/overviewList/delete.png'
  38. }, {
  39. bg: '#4EEE94', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  40. title: '取消置顶', //按钮名字,字符串类型,默认‘按钮’
  41. titleSize: 13, //按钮标题大小,默认12
  42. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  43. selectedColor: 'ffffff', //按钮选中时候的颜色值,支持 rgb,rgba,#
  44. icon: 'widget://image/overviewList/delete.png'
  45. }] // 左滑单元格露出的按钮组.
  46. };
  47. datas.push(data);
  48. }
  49. overviewList.open({
  50. x: 0, // 横坐标, 默认 0.
  51. y: 64, // 纵坐标, 默认 0.
  52. w: 320, // 宽度, 默认设备屏幕宽度.
  53. h: 320, // 高度, 默认 视图高度 + 100.
  54. itemSlipDistance: 60,
  55. datas: datas
  56. }, function(ret, err) {
  57. alert('您点击了第 ' + ret.index + ' 个单元格的' + ret.eventType);
  58. });

补充说明

打开列表视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setFrame

重设模块视图的y,和h

setFrame({params})

params

anim:

  • 类型:布尔
  • 默认值:false
  • 描述:(可选项)改变模块视图的frame时是否添加动画效果

y:

  • 类型:数字类型
  • 默认值:原值
  • 描述:(可选项)重设模块视图的y值

h:

  • 类型:数字类型
  • 默认值:(原值)
  • 描述:(可选项)重设模块视图的h值

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.setFrame({
  3. anim: true,
  4. y: 40
  5. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getIndex

根据唯一标识查找该item在列表中的下标

getIndex({params}, callBack(ret, err))

params

key:

  • 类型:字符串
  • 默认值:无
  • 描述:唯一标识的key

value:

  • 类型:字符串
  • 默认值:无
  • 描述:每条item数据的唯一标识

callBack

ret:

  • 类型:JSON 对象

内部字段:

  1. {
  2. index: //点击item的下标
  3. data //当前操作的item的数据,内部字段与open里datas元素一致
  4. }

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.getIndex({
  3. key: 'uid',
  4. value: '00000001'
  5. }, function(ret, err) {
  6. if (ret) {
  7. alert(JSON.stringify(ret));
  8. } else {
  9. alert(JSON.stringify(err));
  10. }
  11. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getData

根据item的索引获取item的数据

getData({params}, callBack(ret, err))

params

index:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)要获取数据的item的索引

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. data//操作的item的data内部字段跟传进来的data一致
  3. }

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.getData({
  3. index: 0
  4. }, function(ret, err) {
  5. if (ret) {
  6. alert(JSON.stringify(ret));
  7. } else {
  8. alert(JSON.stringify(err));
  9. }
  10. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRightButtons

设置指定索引的item的侧滑按钮

setRightButtons({params})

params

index:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)要设置侧滑按钮的item的索引

rightBtn:

  • 类型:数组对象
  • 默认值:无
  • 描述:(可选项)往左滑动item露出的按钮样式重设
  • 备注:不传表示item不可向左滑动
  • 内部字段:
  1. [{
  2. bg: //(可选项)按钮背景色,支持 rgb,rgba,#,默认#388e8e
  3. title: //(可选项)按钮标题,字符串类型,默认空字符串
  4. titleSize: //(可选项)按钮标题字体大小,数字类型,默认12
  5. titleColor: //(可选项)按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  6. highlightColor //(可选项)按钮选中时的颜色值,支持 rgb,rgba,#,不传则无选中变化
  7. icon //(可选项)按钮标题前图标图片路径,图标大小自适应文字大小,默认无,支持本地协议路径,如widget://、fs://等
  8. }]

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.setRightButtons({
  3. index: 0,
  4. rightBtn: [{
  5. bg: '#556B2F', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  6. title: '取消', //按钮名字,字符串类型,默认‘按钮’
  7. titleSize: 13, //按钮标题大小,默认12
  8. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  9. selectedColor: '#FFFFFF', //按钮选中时候的颜色值,支持 rgb,rgba,#
  10. icon: 'widget://image/overviewList/ok.png'
  11. }, {
  12. bg: '#4EEE94', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  13. title: '确定', //按钮名字,字符串类型,默认‘按钮’
  14. titleSize: 13, //按钮标题大小,默认12
  15. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  16. selectedColor: 'ffffff', //按钮选中时候的颜色值,支持 rgb,rgba,#
  17. icon: 'widget://image/overviewList/ok.png'
  18. }]
  19. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭列表视图

close()

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.close();

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params})

params

datas:

  • 类型:数组对象
  • 默认值:无
  • 描述:(可选项)数据源,若不传则仅停止下拉刷新状态

内部字段:

  1. [{
  2. img: //(可选项)头像图片路径,支持本地和网络路径资源,网络图片会被缓存到本地
  3. title: //(可选项)标题,字符串类型
  4. subTitle //(可选项)子标题,字符串类型
  5. time // (可选项)时间点, 字符串
  6. rightBtn //(可选项)数组对象,往左滑动item露出的按钮信息组成的数组,无默认值,不传时表示item不可向左滑动
  7. 内部字段:
  8. [{
  9. bg: //(可选项)按钮背景色,支持 rgb,rgba,#,默认#388e8e
  10. title: //(可选项)按钮标题,字符串类型,默认空字符串
  11. titleSize: //(可选项)按钮标题字体大小,数字类型,默认12
  12. titleColor: //(可选项)按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  13. highlightColor //(可选项)按钮选中时的颜色值,支持 rgb,rgba,#
  14. icon //(可选项)按钮标题前图标图片路径,图标大小20*20,默认无,支持本地协议路径,如widget://、fs://等
  15. }]
  16. }]

示例代码

  1. var datas = []; // 数据源.
  2. var imgs = ['http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/e4dba38175efac7d07adcae8be8d1223.png',
  3. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/9c212a6c2753103e4deed8aa47bda909.png',
  4. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/be9ced29de96129b6a1e2f19c40de85e.png',
  5. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/94a135721ae675fbccd2484f616a98e1.png',
  6. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/948bec8a4df2adb27581319d8a8c014e.png',
  7. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3cd8bd01f9f474664ff0b2f41611797e.png',
  8. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/5b67af4da9ce31f101c3326fbef10e5e.png',
  9. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3531bbb5db7f920a4f17887449aa5d7d.png',
  10. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/cbf1074f44df8e0f40ca277e31f559ce.png',
  11. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/87a9ad42f49140f1168b0caebf0cb6c3.png',
  12. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/da1cdf8ecba5775f8b54f12cd2a00735.png',
  13. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/a4db2d1809fa57cc91d0173e1c33caf9.png',
  14. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/3e0afb28a7cb0437ea860087cef39fd3.png',
  15. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/893e222cdd8158391f7a01aee3723784.png',
  16. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/59ea90c458f3708279de79b0c7a60693.png',
  17. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/69bff6064593e92c8e4102f174d0bdbf.png',
  18. 'http://abfc6f80482f86f9ccf4.b0.upaiyun.com/apicloud/ca2aa9b8246bc0bfd97ba284dc087e62.png',
  19. 'http://file.apicloud.com/mcm/A6965066817858/d7d1d308fe165b984c09728e7118e9f1.jpg',
  20. 'http://file.apicloud.com/mcm/A6965066817858/83dede361c4597ccfe2d815a76a7b1c2.png',
  21. 'http://file.apicloud.com/mcm/A6965066817858/f23301da3bd6c2c214a464b27c9897c2.jpg'
  22. ];
  23. for (var i = 0; i < 20; i++) { // 使用1000条数据,进行极限测试.
  24. var data = {
  25. uId: 1000 + i,
  26. img: imgs[i], // 头像图片路径,支持本地和网络路径
  27. title: '张学友' + i, // 标题.
  28. subTitle: '200' + i, // 子标题.
  29. time: '20' + i,
  30. rightBtn: [{
  31. bg: '#556B2F', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  32. title: '结束', //按钮名字,字符串类型,默认‘按钮’
  33. titleSize: 13, //按钮标题大小,默认12
  34. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  35. selectedColor: '#FFFFFF', //按钮选中时候的颜色值,支持 rgb,rgba,#
  36. icon: 'widget://image/overviewList/delete.png'
  37. }, {
  38. bg: '#4EEE94', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  39. title: '取消置顶', //按钮名字,字符串类型,默认‘按钮’
  40. titleSize: 13, //按钮标题大小,默认12
  41. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  42. selectedColor: 'ffffff', //按钮选中时候的颜色值,支持 rgb,rgba,#
  43. icon: 'widget://image/overviewList/delete.png'
  44. }] // 左滑单元格露出的按钮组.
  45. };
  46. datas.push(data);
  47. }
  48. var overviewList = api.require('overviewList');
  49. overviewList.reloadData({
  50. datas: datas
  51. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

deleteItem

删除指定索引的数据

deleteItem({params})

params

index:

  • 类型:数字
  • 默认值:最后一条数据的索引
  • 描述:(可选项)要删除的数据的索引下标

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.deleteItem({
  3. index: 0
  4. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

insertItem

插入指定索引的数据

insertItem({params})

params

index:

  • 类型:数字
  • 默认值:最后一条数据的索引加一
  • 描述:(可选项)要插入的数据的索引下标

data:

  • 类型:JSON 对象
  • 默认值:无
  • 描述:数据源,不可为空

内部字段:

  1. {
  2. img: //(可选项)头像图片路径,支持本地和网络路径资源,网络图片会被缓存到本地
  3. title: //(可选项)标题,字符串类型
  4. subTitle //(可选项)子标题,字符串类型
  5. time // (可选项)时间点, 字符串
  6. rightBtn //(可选项)数组对象,往左滑动item露出的按钮信息组成的数组,无默认值,不传时表示item不可向左滑动
  7. 内部字段:
  8. [{
  9. bg: //(可选项)按钮背景色,支持 rgb,rgba,#,默认#388e8e
  10. title: //(可选项)按钮标题,字符串类型,默认空字符串
  11. titleSize: //(可选项)按钮标题字体大小,数字类型,默认12
  12. titleColor: //(可选项)按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  13. highlightColor //(可选项)按钮选中时的颜色值,支持 rgb,rgba,#
  14. icon //(可选项)按钮标题前图标图片路径,图标大小20*20,默认无,支持本地协议路径,如widget://、fs://等
  15. }]
  16. }

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.insertItem({
  3. index: 2,
  4. data: {
  5. uId: '00000000121',
  6. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  7. title: '123456',
  8. subTitle: 'APICloud粉丝交流会',
  9. time: '100',
  10. rightBtn: [{
  11. bg: '#556B2F', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  12. title: '结束', //按钮名字,字符串类型,默认‘按钮’
  13. titleSize: 13, //按钮标题大小,默认12
  14. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  15. selectedColor: '#FFFFFF', //按钮选中时候的颜色值,支持 rgb,rgba,#
  16. icon: 'widget://image/overviewList/delete.png'
  17. }, {
  18. bg: '#4EEE94', //按钮背景色,支持 rgb,rgba,#,默认#ee8262.
  19. title: '取消置顶', //按钮名字,字符串类型,默认‘按钮’
  20. titleSize: 13, //按钮标题大小,默认12
  21. titleColor: '#000000', // 按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  22. selectedColor: 'ffffff', //按钮选中时候的颜色值,支持 rgb,rgba,#
  23. icon: 'widget://image/overviewList/delete.png'
  24. }] // 左滑单元格露出的按钮组.
  25. }
  26. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

refreshItem

刷新指定index条目的数据

refreshItem({params})

params

index:

  • 类型:数字
  • 默认值:0
  • 描述:(可选项)要刷新数据的item索引下标

data:

  • 类型:JSON 对象
  • 默认值:无
  • 描述:要刷新的数据源

内部字段:

  1. {
  2. img: //(可选项)头像图片路径,支持本地和网络路径资源,网络图片会被缓存到本地
  3. title: //(可选项)标题,字符串类型
  4. subTitle //(可选项)子标题,字符串类型
  5. time //(可选项)时间点, 字符串
  6. }

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.refreshItem({
  3. index: 2,
  4. data: {
  5. uId: '00000000121',
  6. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  7. title: '789708',
  8. subTitle: '-100',
  9. time: '-10'
  10. }
  11. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendData

往列表拼接数据

appendData({params})

params

datas:

  • 类型:数组对象
  • 默认值:无
  • 描述:(可选项)要刷新的数据源
  • 备注:不传则仅停止上拉加载更多状态
  • 内部字段:
  1. [{
  2. img: //(可选项)头像图片路径,支持本地和网络路径资源,网络图片会被缓存到本地
  3. title: //(可选项)标题,字符串类型
  4. subTitle //(可选项)子标题,字符串类型
  5. time // (可选项)时间点, 字符串
  6. rightBtn //(可选项)数组对象,往左滑动item露出的按钮信息组成的数组,无默认值,不传时表示item不可向左滑动
  7. 内部字段:
  8. [{
  9. bg: //(可选项)按钮背景色,支持 rgb,rgba,#,默认#388e8e
  10. title: //(可选项)按钮标题,字符串类型,默认空字符串
  11. titleSize: //(可选项)按钮标题字体大小,数字类型,默认12
  12. titleColor: //(可选项)按钮标题颜色,支持 rgb,rgba,#,默认#ffffff
  13. highlightColor //(可选项)按钮选中时的颜色值,支持 rgb,rgba,#
  14. icon //(可选项)按钮标题前图标图片路径,图标大小20*20,默认无,支持本地协议路径,如widget://、fs://等
  15. }]
  16. }]

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.appendData({
  3. datas: [{
  4. uId: '00000000141',
  5. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  6. title: 'APICloud',
  7. subTitle: '+100',
  8. time: '+10'
  9. }, {
  10. uId: '00000000140',
  11. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  12. title: 'APICloud',
  13. subTitle: '+100',
  14. time: '+10'
  15. }, {
  16. uId: '00000000139',
  17. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  18. title: 'APICloud',
  19. subTitle: '+100',
  20. time: '+10'
  21. }, {
  22. uId: '00000000138',
  23. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  24. title: 'APICloud',
  25. subTitle: '+100',
  26. time: '+10'
  27. }, {
  28. uId: '00000000137',
  29. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  30. title: 'APICloud',
  31. subTitle: '+100',
  32. time: '+10'
  33. }, {
  34. uId: '00000000136',
  35. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  36. title: 'APICloud',
  37. subTitle: '+100',
  38. time: '+10'
  39. }, {
  40. uId: '00000000135',
  41. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  42. title: 'APICloud',
  43. subTitle: '+100',
  44. time: '+10'
  45. }, {
  46. uId: '000000001334',
  47. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  48. title: 'APICloud',
  49. subTitle: '+100',
  50. time: '+10'
  51. }, {
  52. uId: '00000000133',
  53. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  54. title: 'APICloud',
  55. subTitle: '+100',
  56. time: '+10'
  57. }, {
  58. uId: '00000000132',
  59. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  60. title: 'APICloud',
  61. subTitle: '+100',
  62. time: '+10'
  63. }, {
  64. uId: '00000000131',
  65. img: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  66. title: 'APICloud',
  67. subTitle: '+100',
  68. time: '+10'
  69. }]
  70. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRefreshHeader

设置下拉刷新样式

setRefreshHeader({params}, callBack(ret, err))

params

loadingImg:

  • 类型:字符串
  • 默认值:无
  • 描述:下拉刷新的小箭头本地图片的路径

bgColor:

  • 类型:字符串
  • 默认值:#f5f5f5
  • 描述:(可选项)下拉刷新视图的背景色,支持 rgb,rgba,#

textColor:

  • 类型:字符串
  • 默认值:#8e8e8e
  • 描述:(可选项)提示文字颜色,支持 rgb,rgba,#

textDown:

  • 类型;字符串
  • 默认值:下拉可以刷新…
  • 描述:(可选项)提示文字

textUp:

  • 类型:字符串
  • 默认值:松开开始刷新…
  • 描述:(可选项)提示文字

showTime:

  • 类型:布尔值
  • 默认值:true
  • 描述:(可选项)是否显示刷新时间

callback(ret, err)

//触发下拉刷新事件

示例代码

  1. var loadingImgae = 'widget://res/overviewList_arrow.png'; //刷新的小箭头
  2. var bgColor = '#F5F5F5'; //下拉刷新的背景颜色,有默认值,可为空
  3. var textColor = '#8E8E8E'; //提示语颜色,有默认值,可为空
  4. var textDown = '下拉可以刷新...'; //尚未触发刷新时间的提示语,有默认值,可为空
  5. var textUp = '松开开始刷新...'; //触发刷新事件的提示语,有默认值,可为空
  6. var showTime = true; //是否显示时间,有默认值,可为空
  7. var overviewList = api.require('overviewList');
  8. overviewList.setRefreshHeader({
  9. loadingImg: loadingImgae,
  10. bgColor: bgColor,
  11. textColor: textColor,
  12. textDown: textDown,
  13. textUp: textUp,
  14. showTime: showTime
  15. }, function(ret, err) {
  16. if (ret) {
  17. alert(JSON.stringify(ret));
  18. } else {
  19. alert(JSON.stringify(err));
  20. }
  21. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRefreshFooter

设置上拉加载更多样式

setRefreshFooter({params}, callBack(ret, err))

callback(ret, err)

//触发加载更多事件

params

loadingImg:

  • 类型:字符串
  • 默认值:无
  • 描述:上拉加载更多的小箭头本地图片的路径

bgColor:

  • 类型:字符串
  • 默认值:#f5f5f5
  • 描述:(可选项)上拉加载视图的背景色,支持 rgb,rgba,#

textColor:

  • 类型:字符串
  • 默认值:#8e8e8e
  • 描述:(可选项)提示文字颜色,支持 rgb,rgba,#

textDown:

  • 类型;字符串
  • 默认值:上拉可以加载更多…
  • 描述:(可选项)提示文字

textUp:

  • 类型:字符串
  • 默认值:松开开始加载…
  • 描述:(可选项)提示文字

showTime:

  • 类型:布尔值
  • 默认值:true
  • 描述:(可选项)是否显示加载时间

示例代码

  1. var loadingImgae = 'widget://res/overviewList_arrow.png'; //刷新的小箭头
  2. var bgColor = '#F5F5F5'; //下拉刷新的背景颜色,有默认值,可为空
  3. var textColor = '#8E8E8E'; //提示语颜色,有默认值,可为空
  4. var textDown = '上拉可加载更多...'; //尚未触发刷新时间的提示语,有默认值,可为空
  5. var textUp = '松开开始加载...'; //触发刷新事件的提示语,有默认值,可为空
  6. var showTime = true; //是否显示时间,有默认值,可为空
  7. var overviewList = api.require('overviewList');
  8. overviewList.setRefreshFooter({
  9. loadingImg: loadingImgae,
  10. bgColor: bgColor,
  11. textColor: textColor,
  12. textDown: textDown,
  13. textUp: textUp,
  14. showTime: showTime
  15. }, function(ret, err) {
  16. if (ret) {
  17. alert(JSON.stringify(ret));
  18. } else {
  19. alert(JSON.stringify(err));
  20. }
  21. });

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示overviewList列表视图

show()

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.show();

补充说明

显示已隐藏的列表视图

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏overviewList列表视图

hide()

示例代码

  1. var overviewList = api.require('overviewList');
  2. overviewList.hide();

补充说明

隐藏overviewList,并没有从内存里清除

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本