groupList

close removeCellAt updateCellAt show

概述

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

open

打开

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

rect:

  • 类型:JSON 类型
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:

styles:

  • 类型:JSON 类型
  • 描述:模块整体样式
  • 内部字段:
  1. bg: '#eee', //(可选项)字符串类型;列表背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  2. title: { //(可选项)JSON 对象类型,分组标题的通用样式设置
  3. bg: '#E0E0E0', //(可选项)字符串类型;分组标题的背景,支持 rgb、rgba、#、img;默认:'#E0E0E0'
  4. h: 25, //(可选项)数字类型;分组标题的高度;默认:25
  5. align: 'left', //(可选项)字符串类型;分组标题的对齐方式,可为 left|center|right;默认:left
  6. color: '#838383', //(可选项)字符串类型;分组标题的字体颜色,支持 rgb、rgba、#;默认:#838383
  7. size: 15, //(可选项)数字类型;分组标题的字体大小;默认:15
  8. marginT: 7, //(可选项)数字类型;分组标题的上边距;默认:7
  9. marginL: 18 //(可选项)数字类型;分组标题的左边距;默认:18
  10. },
  11. cell: { //(可选项)JSON 对象类型,分组子项的通用样式
  12. bg: '#fff', //(可选项)字符串类型;分组子项的背景,支持 rgb、rgba、#、img;默认:#fff
  13. h: 68, //(可选项)数字类型;分组子项的高度;默认:68
  14. main: { //(可选项)JSON 类型;主标题样式设置,当未设置副标题时不显示副标题且不占高度,主标题会自己上下居中显示
  15. marginL: 74, //(可选项)数字类型;主标题相对于分组子项左边的间距大小;默认:74
  16. color: '#636363', //(可选项)字符串类型;主标题文字颜色,支持 rgb、rgba、#;默认:#636363
  17. size: 13, //(可选项)数字类型;主标题字体大小;默认:13
  18. },
  19. sub: { //(可选项)JSON 类型;副标题样式设置;当未设置时不显示副标题且不占高度,主标题会自己上下居中显示
  20. marginL: 74, //(可选项)数字类型;副标题相对于分组子项左边的间距大小;默认:74
  21. marginT: 8, //(可选项)数字类型;副标题和主标题之间的间隙大小;默认:8
  22. color: '#999999', //(可选项)字符串类型;副标题文字颜色,支持 rgb、rgba、#;默认:#999999
  23. size: 12, //(可选项)数字类型;副标题字体大小;默认:12
  24. },
  25. icon: { //(可选项)JSON 类型;头像的样式设置
  26. marginL: 15, //(可选项)数字类型;头像相对于分组子项左边的间距大小;默认:15
  27. marginT: 9, //(可选项)数字类型;头像相对于分组子项上边的间距大小;默认:9
  28. w: 50, //(可选项)数字类型;头像的宽度;默认:50
  29. h: 50, //(可选项)数字类型;头像的高度;默认:同 w
  30. corner: 25 //(可选项)数字类型;头像的圆角半径;默认:2
  31. },
  32. handler: { //(可选项)JSON 类型;cell右边拉手图标的样式设置;若不传则不显示
  33. url: 'fs://handler.png', //JSON 类型;拉手图标的图片地址,要求本地路径(widget://、fs://);未设置时认为 allowHandler 为 false
  34. marginR: 20, //(可选项)数字类型;拉手图标相对于分组子项右边的间距大小;默认:20
  35. marginT: 25, //(可选项)数字类型;拉手图标相对于分组子项上边的间距大小;默认:25
  36. w: 18, //(可选项)数字类型;拉手图标的宽度;默认:18
  37. h: 18 //(可选项)数字类型;拉手图标的高度;默认:同 w
  38. },
  39. options:[{ //(可选项)数组类型;cell 左滑后显示的选项按钮样式组成的数组;未设置则 cell 不可侧滑,侧滑距离为当前cell所有侧滑按钮总宽度。侧滑按钮从右依次往左排列,其索引由0开始
  40. w: 76, //(可选项)数字类型;每个 option 的宽度;默认:76
  41. bg: 'rgba(0,0,0,0)' , //(可选项)字符串类型;每个 option 的背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  42. title: '关注', //(可选项)字符串类型;侧滑按钮上的标题,若不传则不显示
  43. align: 'center', //(可选项)字符串类型;侧滑按钮标题的对齐方式,可为 left|center|right;默认:center
  44. marginB: 13, //(可选项)数字类型;侧滑按钮标题距离按钮下边间隙大小;默认:13
  45. color: '#fff', //(可选项)字符串类型;侧滑按钮标题的颜色,支持 rgb、rgba、#;默认:'#fff'
  46. size: 11 //(可选项)数字类型;侧滑按钮标题文字大小;默认:11
  47. }],
  48. line: { //(可选项)JSON 类型;同 group 下的 cell 之间的分隔线样式
  49. h: 0.8, //(可选项)数字类型;分隔线的高度;默认:0.8
  50. marginL: 0, //(可选项)数字类型;分隔线距 group 左侧的内边距;默认:0
  51. marginR: 0, //(可选项)数字类型;分隔线距 group 右侧的内边距;默认:0
  52. bg: '#eee', //(可选项)字符串类型;分隔线的颜色,支持:rgb、rgba、#;默认:'#eee'
  53. }
  54. }
  55. }

datas:

  • 类型:数组类型
  • 描述:(可选项)列表数据源,若为空则等待reloadData接口刷新后显示该模块
  • 内部字段:
  1. [{ //JSON 对象类型组成的数组;一个分组的数据信息
  2. title: '分组标题', //(可选项)字符串类型;分组标题文字,若不传则不显示
  3. cells: [{ //JSON 数组类型;该分组中的 cell 数据
  4. icon: 'fs://creater.png', //字符串类型;图标地址,支持本地和网络资源路径(widget://、fs://、http://、https://),若是网络路径则图片会被缓存到本地
  5. main: '张泉灵', //字符串类型;主标题文字
  6. sub: '活跃值:200' , //(可选项)字符串类型;副标题
  7. options:[{ //(可选项)数组类型;cell 左滑后显示的选项按钮样式组成的数组;若未设置则以styles->cell->options为准,若亦未设置,则该cell不可侧滑
  8. w: 76, //(可选项)数字类型;每个 option 的宽度;默认:76
  9. bg: 'rgba(0,0,0,0)' , //(可选项)字符串类型;每个 option 的背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  10. title: '关注', //(可选项)字符串类型;侧滑按钮上的标题,若不传则不显示
  11. align: 'center', //(可选项)字符串类型;侧滑按钮标题的对齐方式,可为 left|center|right;默认:center
  12. marginB: 13, //(可选项)数字类型;侧滑按钮标题距离按钮下边间隙大小;默认:13
  13. color: '#fff', //(可选项)字符串类型;侧滑按钮标题的颜色,支持 rgb、rgba、#;默认:'#fff'
  14. size: 11 //(可选项)数字类型;侧滑按钮标题文字大小;默认:11
  15. }],
  16. handler: { //(可选项)JSON 类型;cell右边拉手图标的样式设置;若不传则以styles->cell->handler为准,若亦未设置,则该cell不显示拉手图标
  17. url: 'fs://handler.png', //JSON 类型;拉手图标的图片地址,要求本地路径(widget://、fs://);未设置时认为 allowHandler 为 false
  18. marginR: 20, //(可选项)数字类型;拉手图标相对于分组子项右边的间距大小;默认:20
  19. marginT: 25, //(可选项)数字类型;拉手图标相对于分组子项上边的间距大小;默认:25
  20. w: 18, //(可选项)数字类型;拉手图标的宽度;默认:18
  21. h: 18 //(可选项)数字类型;拉手图标的高度;默认:同 w
  22. }
  23. }]
  24. }]

fixedOn:

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

fixed:

  • 类型:布尔
  • 描述:(可选项)是否将模块视图固定到窗口上,不跟随窗口上下滚动
  • 默认:true

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'show', //字符串类型;交互事件类型
  3. //取值范围如下:
  4. //show(模块加载成功)
  5. //clickOption(点击侧滑出现的右侧按钮)
  6. //clickContent(点击列表项的内容,除了配图和备注以外的区域)
  7. //clickImg(点击列表项的配图)
  8. //clickHandler(点击列表项右拉手按钮)
  9. cellIndex: 1, //数字类型;点击目标对应数据源中 cell 的索引
  10. optionIndex: 0 , //数字类型;eventType 为 clickOption 时有效,被点击 option 对应的索引
  11. cellData: {} //JSON对象;open时传入的 cell 的原始数据
  12. }

示例代码

  1. var groupList = api.require('groupList');
  2. groupList.open({
  3. rect: {
  4. x: 0,
  5. y: 0,
  6. w: 320,
  7. h: 480
  8. },
  9. styles: {
  10. bg: '#eee',
  11. title: {
  12. bg: '#E0E0E0',
  13. h: 25,
  14. align: 'left',
  15. color: '#838383',
  16. size: 15,
  17. marginT: 7,
  18. },
  19. cell: {
  20. bg: '#fff',
  21. h: 68,
  22. main: {
  23. marginL: 74,
  24. marginT: 17,
  25. color: '#636363',
  26. size: 13,
  27. },
  28. sub: {
  29. marginL: 74,
  30. marginT: 8,
  31. color: '#999999',
  32. size: 12,
  33. },
  34. icon: {
  35. marginL: 15,
  36. marginT: 9,
  37. w: 50,
  38. h: 50,
  39. corner: 25
  40. },
  41. handler: {
  42. url: 'fs://handler.png',
  43. marginR: 20,
  44. marginT: 25,
  45. w: 18,
  46. h: 18
  47. },
  48. options: [{
  49. w: 76,
  50. bg: 'rgba(0,0,0,0)',
  51. title: '关注',
  52. align: 'center',
  53. marginB: 13,
  54. color: '#fff',
  55. size: 11
  56. }],
  57. line: {
  58. h: 0.8,
  59. marginL: 0,
  60. marginR: 0,
  61. bg: '#eee',
  62. }
  63. }
  64. },
  65. datas: [{
  66. title: '分组标题',
  67. cells: [{
  68. icon: 'fs://creater.png',
  69. main: '张泉灵',
  70. sub: '活跃值:200',
  71. options: [{
  72. w: 76,
  73. bg: 'rgba(0,0,0,0)',
  74. title: '关注',
  75. align: 'center',
  76. marginB: 13,
  77. color: '#fff',
  78. size: 11
  79. }],
  80. handler: {
  81. url: 'fs://handler.png',
  82. marginR: 20,
  83. marginT: 25,
  84. w: 18,
  85. h: 18
  86. }
  87. }]
  88. }],
  89. fixedOn: api.frameName,
  90. fixed: true
  91. }, function(ret, err) {
  92. if (ret) {
  93. alert(JSON.stringify(ret));
  94. } else {
  95. alert(JSON.stringify(err));
  96. }
  97. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭 groupList 列表视图

close()

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params})

params

datas:

  • 类型:数组类型
  • 描述:(可选项)列表数据源,若为空,则仅停止下拉刷新状态
  • 内部字段:
  1. [{ //JSON 对象类型组成的数组;一个分组的数据信息
  2. title: '分组标题', //(可选项)字符串类型;分组标题文字,若不传则不显示
  3. cells: [{ //JSON 数组类型;该分组中的 cell 数据
  4. icon: 'fs://creater.png', //字符串类型;图标地址,支持本地和网络资源路径(widget://、fs://、http://、https://),若是网络路径则图片会被缓存到本地
  5. main: '张泉灵', //字符串类型;主标题文字
  6. sub: '活跃值:200' , //(可选项)字符串类型;副标题
  7. options:[{ //(可选项)数组类型;cell 左滑后显示的选项按钮样式组成的数组;若未设置则以open->styles->cell->options为准,若亦未设置,则该cell不可侧滑
  8. w: 76, //(可选项)数字类型;每个 option 的宽度;默认:76
  9. bg: 'rgba(0,0,0,0)' , //(可选项)字符串类型;每个 option 的背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  10. title: '关注', //(可选项)字符串类型;侧滑按钮上的标题,若不传则不显示
  11. align: 'center', //(可选项)字符串类型;侧滑按钮标题的对齐方式,可为 left|center|right;默认:center
  12. marginB: 13, //(可选项)数字类型;侧滑按钮标题距离按钮下边间隙大小;默认:13
  13. color: '#fff', //(可选项)字符串类型;侧滑按钮标题的颜色,支持 rgb、rgba、#;默认:'#fff'
  14. size: 11 //(可选项)数字类型;侧滑按钮标题文字大小;默认:11
  15. }],
  16. handler: { //(可选项)JSON 类型;cell右边拉手图标的样式设置;若不传则以open->styles->cell->handler为准,若亦未设置,则该cell不显示拉手图标
  17. url: 'fs://handler.png', //JSON 类型;拉手图标的图片地址,要求本地路径(widget://、fs://);未设置时认为 allowHandler 为 false
  18. marginR: 20, //(可选项)数字类型;拉手图标相对于分组子项右边的间距大小;默认:20
  19. marginT: 25, //(可选项)数字类型;拉手图标相对于分组子项上边的间距大小;默认:25
  20. w: 18, //(可选项)数字类型;拉手图标的宽度;默认:18
  21. h: 18 //(可选项)数字类型;拉手图标的高度;默认:同 w
  22. }
  23. }]
  24. }]

示例代码

  1. var groupList = api.require('groupList');
  2. groupList.reloadData({
  3. datas: [{
  4. title: '分组标题',
  5. cells: [{
  6. main: '张泉灵',
  7. sub: '活跃值:200',
  8. options: [{
  9. w: 76,
  10. bg: 'rgba(0,0,0,0)',
  11. title: '关注',
  12. marginB: 13,
  13. color: '#fff',
  14. size: 11
  15. }],
  16. handler: {
  17. url: 'fs://handler.png',
  18. marginR: 20,
  19. marginT: 25,
  20. w: 18,
  21. h: 18
  22. }
  23. }]
  24. }]
  25. });

可提供的1.0.0及更高版本

removeCellAt

从分组列表中移除指定索引的数据

removeCellAt({params})

params

groupIndex:

  • 类型:字符串类型
  • 描述:要删除数据的分组 index

cellIndex:

  • 类型:数字类型
  • 描述:要删除数据在 cells 中的 index

示例代码

  1. var groupList = api.require('groupList');
  2. groupList.removeCellAt({
  3. groupIndex: 1,
  4. cellIndex: 1
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addCellAt

在指定分组中的指定位置插入数据

addCellAt({params})

params

groupIndex:

  • 类型:字符串类型
  • 描述:插入目标分组的 index

cellIndex:

  • 类型:数字类型
  • 描述:(可选项)要插入的数据的索引下标
  • 默认:将新数据附加到当前分组最后一条数据后

cell:

  • 类型:JSON 类型
  • 描述:数据源
  • 内部字段:
  1. { //JSON 数组类型;该分组中的 cell 数据
  2. icon: 'fs://creater.png', //字符串类型;图标地址,支持本地和网络资源路径(widget://、fs://、http://、https://),若是网络路径则图片会被缓存到本地
  3. main: '张泉灵', //字符串类型;主标题文字
  4. sub: '活跃值:200' , //(可选项)字符串类型;副标题
  5. options:[{ //(可选项)数组类型;cell 左滑后显示的选项按钮样式组成的数组;若未设置则以open->styles->cell->options为准,若亦未设置,则该cell不可侧滑
  6. w: 76, //(可选项)数字类型;每个 option 的宽度;默认:76
  7. bg: 'rgba(0,0,0,0)' , //(可选项)字符串类型;每个 option 的背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  8. title: '关注', //(可选项)字符串类型;侧滑按钮上的标题,若不传则不显示
  9. align: 'center', //(可选项)字符串类型;侧滑按钮标题的对齐方式,可为 left|center|right;默认:center
  10. marginB: 13, //(可选项)数字类型;侧滑按钮标题距离按钮下边间隙大小;默认:13
  11. color: '#fff', //(可选项)字符串类型;侧滑按钮标题的颜色,支持 rgb、rgba、#;默认:'#fff'
  12. size: 11 //(可选项)数字类型;侧滑按钮标题文字大小;默认:11
  13. }],
  14. handler: { //(可选项)JSON 类型;cell右边拉手图标的样式设置;若不传则以open->styles->cell->handler为准,若亦未设置,则该cell不显示拉手图标
  15. url: 'fs://handler.png', //JSON 类型;拉手图标的图片地址,要求本地路径(widget://、fs://);未设置时认为 allowHandler 为 false
  16. marginR: 20, //(可选项)数字类型;拉手图标相对于分组子项右边的间距大小;默认:20
  17. marginT: 25, //(可选项)数字类型;拉手图标相对于分组子项上边的间距大小;默认:25
  18. w: 18, //(可选项)数字类型;拉手图标的宽度;默认:18
  19. h: 18 //(可选项)数字类型;拉手图标的高度;默认:同 w
  20. }
  21. }

示例代码

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateCellAt

更新指定分组中指定位置的数据

updateCellAt({params})

params

groupIndex:

  • 类型:字符串类型
  • 描述:更新目标分组的 index

cellIndex:

  • 类型:数字类型
  • 描述:要更新数据的索引下标

cell:

  • 类型:JSON 类型
  • 描述:数据源
  • 内部字段:
  1. { //JSON 数组类型;该分组中的 cell 数据
  2. icon: 'fs://creater.png', //字符串类型;图标地址,支持本地和网络资源路径(widget://、fs://、http://、https://),若是网络路径则图片会被缓存到本地
  3. main: '张泉灵', //字符串类型;主标题文字
  4. sub: '活跃值:200' , //(可选项)字符串类型;副标题
  5. options:[{ //(可选项)数组类型;cell 左滑后显示的选项按钮样式组成的数组;若未设置则以open->styles->cell->options为准,若亦未设置,则该cell不可侧滑
  6. w: 76, //(可选项)数字类型;每个 option 的宽度;默认:76
  7. bg: 'rgba(0,0,0,0)' , //(可选项)字符串类型;每个 option 的背景,支持 rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  8. title: '关注', //(可选项)字符串类型;侧滑按钮上的标题,若不传则不显示
  9. align: 'center', //(可选项)字符串类型;侧滑按钮标题的对齐方式,可为 left|center|right;默认:center
  10. marginB: 13, //(可选项)数字类型;侧滑按钮标题距离按钮下边间隙大小;默认:13
  11. color: '#fff', //(可选项)字符串类型;侧滑按钮标题的颜色,支持 rgb、rgba、#;默认:'#fff'
  12. size: 11 //(可选项)数字类型;侧滑按钮标题文字大小;默认:11
  13. }],
  14. handler: { //(可选项)JSON 类型;cell右边拉手图标的样式设置;若不传则以open->styles->cell->handler为准,若亦未设置,则该cell不显示拉手图标
  15. url: 'fs://handler.png', //JSON 类型;拉手图标的图片地址,要求本地路径(widget://、fs://);未设置时认为 allowHandler 为 false
  16. marginR: 20, //(可选项)数字类型;拉手图标相对于分组子项右边的间距大小;默认:20
  17. marginT: 25, //(可选项)数字类型;拉手图标相对于分组子项上边的间距大小;默认:25
  18. w: 18, //(可选项)数字类型;拉手图标的宽度;默认:18
  19. h: 18 //(可选项)数字类型;拉手图标的高度;默认:同 w
  20. }
  21. }
  1. var groupList = api.require('groupList');
  2. groupList.updateCellAt({
  3. groupIndex: 1,
  4. cellIndex: 2,
  5. cell: {
  6. icon: 'fs://creater.png',
  7. main: '张泉灵',
  8. sub: '活跃值:200',
  9. options: [{
  10. w: 76,
  11. bg: 'rgba(0,0,0,0)',
  12. title: '关注',
  13. align: 'center',
  14. marginB: 13,
  15. color: '#fff',
  16. size: 11
  17. }],
  18. handler: {
  19. url: 'fs://handler.png',
  20. marginR: 20,
  21. marginT: 25,
  22. w: 18,
  23. h: 18
  24. }
  25. }
  26. });

可用性

iOS系统,Android系统

setRefreshHeader

设置下拉刷新样式

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

params

loadingImg:

  • 类型:字符串类型
  • 描述:(可选项)下拉刷新时显示的图标路径,支持:widget://、fs://
  • 默认:未设置时不显示该图标

bgColor:

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

textColor:

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

textDown:

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

textUp:

  • 类型:字符串类型
  • 描述:(可选项)下拉到一点位置时的提示文字
  • 默认:’松开开始刷新…’

showTime:

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

callback

返回触发刷新事件,通过 reloadData 停止下拉状态

示例代码

  1. var groupList = api.require('groupList');
  2. groupList.setRefreshHeader({
  3. loadingImg: 'widget://res/groupList_arrow.png',
  4. bgColor: '#F5F5F5',
  5. textColor: '#8E8E8E',
  6. textDown: '下拉可以刷新...',
  7. textUp: '松开开始刷新...',
  8. showTime: true
  9. }, function(ret, err) {
  10. if (ret) {
  11. alert(JSON.stringify(ret));
  12. } else {
  13. alert(JSON.stringify(err));
  14. }
  15. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的 groupList 列表视图

show()

示例代码

  1. groupList.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏 groupList 列表视图,并没有从内存里清除

hide()

示例代码

iOS系统,Android系统

可提供的1.0.0及更高版本