UIListGroup

open show getIndex reloadData updateItem appendData setRefreshHeader stopRefresh

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UIListGroup 模块封装了一个数据列表控件，列表项水平侧滑可出现控制按钮；开发者可自定义列表的数据源，及列表的样式，支持列表项的增、删、改、查，支持批量更新、追加数据。 本模块是基于 APICloud 开源模块 UIListView 修改的。

open

打开

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

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 注意：在 Android 平台上此参数必须传
  • 内部字段：

data：

  • 类型：数组
  • 描述：列表的数据源，开发者可以自定义唯一的键值对信息（如：uid: ‘1001’），供 getIndex 使用
  • 内部字段：
  2.     imgPath: '',              //（可选项）字符串类型；列表项的配图路径，支持http://、https://、widget://、fs://等协议，网络图片会被缓存到本地，默认显示apicloud图片
  3.     leftColor: '#f00',        //（可选项）数字类型；列表项左边视图的颜色；默认：'#f00'
  4.     title: '',                //（可选项）字符串类型；标题，若不传或为空则 subTitle 上下位置居中显示
  5.     timestamp:'',             //（可选项）字符串类型；列表分组时间戳，若不传则与最近的一条有效timestamp的数据中的timestamp保持一致; 如果前面的数据,都没有传timestamp,则不显示分组标题
  6.     subTitle: '',             //（可选项）字符串类型；子标题，若不传或为空则 title 上下位置居中显示
  7.     rightImgArray:[],         //（可选项）数组类型；列表项右侧的配图，若不传或为空则不显示
  8.     time: '',                 //（可选项）字符串类型；时间标签，若不传则不显示
  9. }]

rightBtns：

  • 类型：数组
  • 描述：（可选项）列表项向左滑动露出的按钮组
  • 内部字段：
  1. [{
  2.     bgColor: '#388e8e', //（可选项）字符串类型；按钮背景色，支持 rgb、rgba、#；默认：'#388e8e'
  3.     activeBgColor: '',  //（可选项）字符串类型；按钮按下时的背景色，支持 rgb、rgba、#(ios不支持)
  4.     width: 70,          //（可选项）数字类型；按钮的宽度；默认：w / 4       
  5.     title: '',          //（可选项）字符串类型；按钮标题，水平、垂直居中
  6.     titleSize: 12,      //（可选项）数字类型；按钮标题文字大小；默认：12
  7.     titleColor: '#fff', //（可选项）字符串类型；按钮标题文字颜色，支持 rgb、rgba、#；默认：'#ffffff'
  8. }]

styles:

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     cellSpacing:10                        //（可选项）数字类型：行间距的高度：默认15
  3.     halvingLine:''                       //(可选项)字符串类型；分割线颜色，支持 rgb、rgba、#；默认：'rgba(255,255,255,0.)'
  4.     backgroundColor:'#272727' ,           //（可选项）字符串类型；模块的背景颜色，支持 rgb、rgba、#；默认：'#272727'
  5.     item: {                             //（可选项）JSON对象；列表项的样式
  6.         bgColor: '#AFEEEE',             //（可选项）字符串类型；列表项的背景色，支持 rgb、rgba、#；默认：'#AFEEEE'
  7.         activeBgColor: '#F5F5F5',       //（可选项）字符串类型；列表项按下时的背景色，支持 rgb、rgba、#；默认：'#F5F5F5'(iOS不支持)
  8.         height: 55,                     //（可选项）数字类型；列表项的高度；默认：55
  9.         leftWidth: 10,                  //（可选项）数字类型；列表项左边视图的宽度；默认：10
  10.         imgMarginLeft:10,               //（可选项）数字类型；列表项的图片的左边距；默认：10
  11.         imgMarginRight:10,              //（可选项）数字类型；列表项的图片的右边距；默认：10
  12.         imgWidth: 20,                   //（可选项）数字类型；列表项配图的宽度；默认：列表项的高度减去10px
  13.         imgHeight: 20,                  //（可选项）数字类型；列表项配图的高度；默认：列表项的高度减去10px
  14.         imgCorner: 4,                   //（可选项）数字类型；列表项配图的圆角大小；默认：0
  15.         placeholderImg: '',             //（可选项）字符串类型；列表项配图的占位图路径（本地路径，fs://、widget://），默认：APICloud 图标
  16.         titleMarginTop:5                //（可选项）数字类型；列表项的图片的上边距；默认：5(跟time的下边距相同)
  17.         subTitleMarginBottom:5          //（可选项）数字类型；列表项的图片的下边距；默认：5(跟badge的下边距相同)
  18.         titleSize: 12,                  //（可选项）数字类型；列表项标题文字大小；默认：12
  19.         titleColor: '#000',             //（可选项）字符串类型；列表项标题文字颜色，支持 rgb，rgba，#；默认：'#000000'
  20.         subTitleSize: 12,               //（可选项）数字类型；列表项子标题文字大小；默认：12
  21.         subTitleColor: '#000',          //（可选项）字符串类型：列表项子标题文字颜色，支持 rgb、rgba、#；默认：'#000000' 
  22.         rightImgSize:30                  //（可选项）数字类型；列表项右侧图片的大小；默认：30
  23.         timeColor: '#000',              //（可选项）字符串类型；时间标签的文字颜色，支持 rgb、rgba、#；默认：'#000000'
  24.         timeSize: 12,                   //（可选项）数字类型；时间标签的文字大小；默认：12
  25.         marginRight: 10                 //（可选项）数字类型；时间标签距离模块右边距；默认：10
  26.         timeWidth:50                    //（可选项）数字类型；列表项时间的宽度；默认：50
  27.     }
  28. }

fixedOn：

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

showScrollBar：

  • 类型：布尔
  • 描述：（可选项）是否显示滚动条
  • 默认：true

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',  //字符串类型；交互事件类型
  3.                         //取值范围如下：
  4.                     //show（模块加载成功）
  5.                         //rightImgClick
  6.     index: 0,               //数字类型；列表项的索引
  7.     btnIndex: 0,            //数字类型；列表项侧滑出现的按钮的索引
  8.     rightImgClickIndex: 0   //数字类型；点击右侧图标的index（从左到右开始索引）
  9. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.open({
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: api.winWidth,
  7.         h: api.frameHeight
  8.     },
  9.     data: [{
  10.         uid: '1001',
  11.         imgPath: 'widget://res/img/apicloud.png',
  12.         title: '标题',
  13.         subTitle: '子标题，说明文字',
  14.         time: '今天   13:45',
  15.     }, {
  16.         uid: '1001',
  17.         imgPath: 'widget://res/img/apicloud.png',
  18.         title: '标题',
  19.         subTitle: '子标题，说明文字',
  20.         time: '今天   13:45',
  21.     }, {
  22.         uid: '1001',
  23.         imgPath: 'widget://res/img/apicloud.png',
  24.         title: '标题',
  25.         subTitle: '子标题，说明文字',
  26.         time: '今天   13:45',
  27.     }, {
  28.         uid: '1001',
  29.         imgPath: 'widget://res/img/apicloud.png',
  30.         title: '标题',
  31.         subTitle: '子标题，说明文字',
  32.         time: '今天   13:45',
  33.     }, {
  34.         uid: '1001',
  35.         imgPath: 'widget://res/img/apicloud.png',
  36.         title: '标题',
  37.         subTitle: '子标题，说明文字',
  38.         time: '今天   13:45',
  39.     }, {
  40.         uid: '1001',
  41.         imgPath: 'widget://res/img/apicloud.png',
  42.         title: '标题',
  43.         subTitle: '子标题，说明文字',
  44.         time: '今天   13:45',
  45.     }, {
  46.         uid: '1001',
  47.         imgPath: 'widget://res/img/apicloud.png',
  48.         title: '标题',
  49.         time: '今天   13:45',
  50.     }, {
  51.         uid: '1001',
  52.         imgPath: 'widget://res/img/apicloud.png',
  53.         title: '标题',
  54.         subTitle: '子标题，说明文字',
  55.         time: '今天   13:45',
  56.     }, {
  57.         uid: '1001',
  58.         imgPath: 'widget://res/img/apicloud.png',
  59.         title: '标题',
  60.         subTitle: '子标题，说明文字',
  61.         time: '今天   13:45',
  62.     }, {
  63.         uid: '1001',
  64.         imgPath: 'widget://res/img/apicloud.png',
  65.         title: '标题',
  66.         subTitle: '子标题，说明文字',
  67.         time: '今天   13:45',
  68.     }, {
  69.         imgPath: 'widget://res/img/apicloud.png',
  70.         title: '标题',
  71.         subTitle: '子标题，说明文字',
  72.         time: '今天   13:45',
  73.     }],
  74.     rightBtns: [{
  75.         bgColor: '#388e8e',
  76.         activeBgColor: '',
  77.         width: 70,
  78.         title: '按钮',
  79.         titleSize: 12,
  80.         titleColor: '#fff'
  81.     }],
  82. styles: {
  83.                  backgroundColor: '#696969',            
  84.                  item: {                             
  85.                  bgColor: '#AFEEEE',             
  86.                  activeBgColor: '#F5F5F5',       
  87.                  height: 55,                     
  88.                  imgMarginLeft:10,               
  89.                  imgMarginRight:10,               
  90.                  imgWidth: 20,                   
  91.                  imgHeight: 20,                  
  93.                  placeholderImg: '',             
  94.                  titleMarginTop:5,                
  95.                  subTitleMarginBottom:5,          
  96.                  titleSize: 12,                  
  97.                  titleColor: '#000',             
  98.                  subTitleSize: 12,              
  99.                  subTitleColor: '#000',          
  100.                  subTitleWidth: 100, 
  101.                  rightImgSize:30,              
  102.                  timeColor: '#000',              
  103.                  timeSize: 16,                   
  104.                  marginRight: 10,                 
  105.                  }
  106.                  },
  107.     fixedOn: api.frameName
  108. }, function(ret, err) {
  109.     if (ret) {
  110.         alert(JSON.stringify(ret));
  111.     } else {
  112.         alert(JSON.stringify(err));
  113.     }
  114. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭数据列表模块

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示

show()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getIndex

根据开发者自定义的唯一标识（open 接口的 data 参数中自定义的唯一标识）查找列表项对应的数据

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

params

key：

  • 类型：字符串
  • 描述：调用 open 接口时，data 参数传入的开发者自定义的唯一标识的 key
  • 类型：字符串
  • 描述：调用 open 接口时，data 参数传入的开发者自定义的唯一标识的 value

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     index: 0,   //数字类型；当前列表项的索引
  3.     data: []    //数组类型；当前列表项的数据，内部字段与 open 时的 data 参数一致
  4. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.getIndex({
  3.     key: 'uid',
  4.     value: '1001'
  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及更高版本

getDataByIndex

根据列表项的索引获取对应的数据

getDataByIndex({params}, callback(ret))

params

index：

  • 类型：数字
  • 描述：（可选项）列表项的索引
  • 默认值：0

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.getDataByIndex({
  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及更高版本

reloadData

刷新列表数据

reloadData({params}, callback(ret))

params

data：

  • 类型：数组
  • 描述：（可选项）列表的数据源，若不传或传空，仅收起下拉刷新组件
  • 内部字段：
  1. [{
  2.     imgPath: '',              //（可选项）字符串类型；列表项的配图路径，支持http://、https://、widget://、fs://等协议，网络图片会被缓存到本地，若不传则标题和子标题靠最左侧显示
  3.     title: '',                //（可选项）字符串类型；标题，若不传或为空则 subTitle 上下位置居中显示
  4.     timestamp:'',             //（可选项）字符串类型；列表分组时间戳，若不传则不显示分组标题
  5.     subTitle: '',             //（可选项）字符串类型；子标题，若不传或为空则 title 上下位置居中显示
  6.     rightImgArray:[],         //（可选项）数组类型；列表项右侧的配图，若不传或为空则不显示
  7.     time: '',                 //（可选项）字符串类型；时间标签，若不传则不显示
  9. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true        //布尔型；true||false     
  3. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.reloadData({
  3.     data: [{
  4.         imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  5.         title: '新标题',
  6.         subTitle: '新子标题',
  7.     }]
  8. }, function(ret) {
  9.     if (ret) {
  10.         alert(JSON.stringify(ret));
  11.     } else {
  12.         alert(JSON.stringify(err));
  13.     }
  14. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

deleteItem

根据索引删除某一条列表的数据

deleteItem({params}, callback(ret))

params

index：

  • 类型：数字
  • 描述：（可选项）数据列表的索引
  • 默认值：0

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true       //布尔型；true||false
  3. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.deleteItem({
  3.     index: 2
  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及更高版本

updateItem

根据索引更新某一条列表的数据

updateItem({params}, callback(ret))

params

index：

  • 类型：数字
  • 描述：（可选项）数据列表的索引
  • 默认值：0

data：

  • 类型：JSON 对象
  • 描述：列表的数据源
  • 内部字段：
  1. {
  2.     imgPath: '',             //（可选项）字符串类型；列表项的配图路径，支持http://、https://、widget://、fs://等协议，网络图片会被缓存到本地，若不传则标题和子标题靠最左侧显示
  3.     title: '',               //（可选项）字符串类型；标题，若不传或为空则 subTitle 上下位置居中显示
  4.     timestamp:'',             //（可选项）字符串类型；列表分组时间戳，若不传则不显示分组标题
  5.     subTitle: '',            //（可选项）字符串类型；子标题，若不传或为空则 title 上下位置居中显示
  6.     rightImgArray:[],         //（可选项）数组类型；列表项右侧的配图，若不传或为空则不显示
  7.     time: '',                //（可选项）字符串类型；时间标签，若不传则不显示
  9. }

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true     //布尔型；true||false
  3. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.updateItem({
  3.     index: 2,
  4.     data: {
  5.         imgPath: 'http://img1.3lian.com/gif/more/11/201206/a5194ba8c27b17def4a7c5495aba5e32.jpg',
  6.         title: '刷新标题',
  7.         subTitle: '刷新子标题',
  8.     }
  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及更高版本

insertItem

根据索引向某一条列表插入数据

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

params

  • 描述：（可选项）数据列表的索引
  • 默认值：列表最后一条数据的索引

data：

  • 类型：数组
  • 描述：列表的数据源
  • 内部字段：
  1. [{
  2.     imgPath: '',              //（可选项）字符串类型；列表项的配图路径，支持http://、https://、widget://、fs://等协议，网络图片会被缓存到本地，默认显示apicloud图片
  3.     leftColor: '#f00',        //（可选项）数字类型；列表项左边视图的颜色；默认：'#f00'
  4.     title: '',                //（可选项）字符串类型；标题，若不传或为空则 subTitle 上下位置居中显示
  5.     timestamp:'',             //（可选项）字符串类型；列表分组时间戳，若不传则与最近的一条有效timestamp的数据中的timestamp保持一致; 如果前面的数据,都没有传timestamp,则不显示分组标题
  6.     subTitle: '',             //（可选项）字符串类型；子标题，若不传或为空则 title 上下位置居中显示
  7.     rightImgArray:[],         //（可选项）数组类型；列表项右侧的配图，若不传或为空则不显示
  8.     time: '',                 //（可选项）字符串类型；时间标签，若不传则不显示
  9. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.insertItem({
  3.     index: 2,
  4.     data: [{
  5.         uid: '1001',
  6.         imgPath: 'widget://res/img/apicloud.png',
  7.         title: '标题',
  8.         subTitle: '子标题，说明文字',
  9.         time: '今天   13:45',
  10.     }, {
  11.         uid: '1001',
  12.         imgPath: 'widget://res/img/apicloud.png',
  13.         title: '标题',
  14.         subTitle: '子标题，说明文字',
  15.         time: '今天   13:45',
  16.     }, {
  17.         uid: '1001',
  19.         title: '标题',
  20.         subTitle: '子标题，说明文字',
  21.         time: '今天   13:45',
  22.     }, {
  23.         uid: '1001',
  24.         imgPath: 'widget://res/img/apicloud.png',
  25.         title: '标题',
  26.         subTitle: '子标题，说明文字',
  27.         time: '今天   13:45',
  28.     }, {
  29.         uid: '1001',
  30.         imgPath: 'widget://res/img/apicloud.png',
  31.         title: '标题',
  32.         subTitle: '子标题，说明文字',
  33.         time: '今天   13:45',
  34.     }, {
  35.         uid: '1001',
  36.         imgPath: 'widget://res/img/apicloud.png',
  37.         title: '标题',
  38.         subTitle: '子标题，说明文字',
  39.         time: '今天   13:45',
  40.     }, {
  41.         uid: '1001',
  42.         imgPath: 'widget://res/img/apicloud.png',
  43.         title: '标题',
  44.         subTitle: '子标题，说明文字',
  45.         time: '今天   13:45',
  46.     }, {
  47.         uid: '1001',
  48.         imgPath: 'widget://res/img/apicloud.png',
  49.         title: '标题',
  50.         subTitle: '子标题，说明文字',
  51.         time: '今天   13:45',
  52.     }, {
  53.         uid: '1001',
  54.         imgPath: 'widget://res/img/apicloud.png',
  55.         title: '标题',
  56.         subTitle: '子标题，说明文字',
  57.         time: '今天   13:45',
  58.     }, {
  59.         uid: '1001',
  60.         imgPath: 'widget://res/img/apicloud.png',
  61.         title: '标题',
  62.         subTitle: '子标题，说明文字',
  63.         time: '今天   13:45',
  64.     }, {
  65.         imgPath: 'widget://res/img/apicloud.png',
  66.         title: '标题',
  67.         subTitle: '子标题，说明文字',
  68.         time: '今天   13:45',
  69.     }],
  70. }, function(ret, err) {
  71.     if (ret) {
  72.         alert(JSON.stringify(ret));
  73.     } else {
  74.         alert(JSON.stringify(err));
  75.     }
  76. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

appendData

向列表末端追加数据

appendData({params}, callback(ret))

data：

  • 类型：数组对象
  • 描述：列表的数据源，若不传或传空，仅收起上拉加载组件
  • 内部字段：
  1. [{
  2.     imgPath: '',              //（可选项）字符串类型；列表项的附图路径，支持http://、https://、widget://、fs://等协议，网络图片会被缓存到本地，若不传则标题和子标题靠最左侧显示
  3.     title: '',                //（可选项）字符串类型；标题，若不传或为空则 subTitle 上下位置居中显示
  4.     timestamp:'',             //（可选项）字符串类型；列表分组时间戳，若不传则不显示分组标题
  5.     subTitle: '',             //（可选项）字符串类型；子标题，若不传或为空则 title 上下位置居中显示
  6.     rightImgArray:[],         //（可选项）数组类型；列表项右侧的配图，若不传或为空则不显示
  7.     time: '',                 //（可选项）字符串类型；时间标签，若不传则不显示
  9. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true        //布尔型；true||false
  3. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.appendData({
  3.     data: [{
  4.         imgPath: 'http://d.hiphotos.baidu.com/image/pic/item/4d086e061d950a7b29a788c209d162d9f2d3c922.jpg',
  5.         title: '新增标题',
  6.         subTitle: '新增子标题',
  7.     }]
  8. }, function(ret, err) {
  9.     if (ret) {
  10.         alert(JSON.stringify(ret));
  11.     } else {
  12.         alert(JSON.stringify(err));
  13.     }
  14. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getCount

获取当前列表的总数据量

getCount(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     count: 21        //数字类型；当前列表包含的数据总数
  3. }

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.getCount(function(ret) {
  3.     alert(JSON.stringify(ret));
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setRefreshHeader

设置下拉刷新，通过 reloadData 收起下拉刷新组件

setRefreshHeader({params}, callback(ret))

params

style：

  • 类型：JSON对象
  • 描述：下拉刷新的样式配置
  • 内部字段：
  1. {
  2.     bgColor: '#C0C0C0',                         //（可选项）字符串类型；下拉刷新的背景设置，支持 rgb、rgba、#，该背景大小同当前模块的宽高；默认：#C0C0C0
  3.     refreshHeaderHeight : 60 ,                  //（可选项）数字类型；下拉高度达到一定阈值，本参数暂仅支持 ios 平台；默认：60
  4.     loadAnimInterval : 200 ,                    //（可选项）数字类型；图片播放时间间隔，单位为毫秒；默认：200
  5.     image: {                                    //（可选项）JSON 对象类型；下拉刷新相关图片设置；若不传则使用默认图标
  6.       pull:['fs://t1.png','fs://t2.png',...],  //（可选项）数组类型；组成下拉过程的动画关键帧图片数组，这组图片随下拉高度同步放大缩小，同时自动播放关键帧图片：每下拉一定距离（阈值/图片数量），播放一帧关键帧图片；图片规格为正方形，如：50*50、100*100；若不传则使用默认图标
  7.       load: ['fs://t1.png','fs://t2.png',...]  //（可选项）数组类型；组成下拉刷新加载状态动画的关键帧图片数组，图片为正方形的，如：50*50、100*100，建议开发者传大小合适的图片以适配高分辨率手机屏幕；若不传则使用默认图标
  8.     },
  9.     isScale: true                              //（可选项）布尔类型；播放下拉过程中的关键帧动画时，是否同时添加等比同步缩放效果；默认值：true
  10. }

callback()

下拉刷新的事件回调

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.setRefreshHeader({
  3.    style: {
  4.         bgColor: '#C0C0C0',
  5.         isScale: true,
  6.         image: {
  7.             pull: [
  8.                 'widget://image/refresh/dropdown0.png',
  9.                 'widget://image/refresh/dropdown1.png',
  10.                 'widget://image/refresh/dropdown2.png',
  11.                 'widget://image/refresh/dropdown3.png',
  12.                 'widget://image/refresh/dropdown4.png',
  13.                 'widget://image/refresh/dropdown5.png',
  14.                 'widget://image/refresh/dropdown6.png'
  15.             ],
  16.             load: [
  17.                 'widget://image/refresh/loading0.png',
  18.                 'widget://image/refresh/loading1.png',
  19.                 'widget://image/refresh/loading2.png',
  20.                 'widget://image/refresh/loading3.png',
  21.                 'widget://image/refresh/loading4.png'
  22.             ]
  23.         }
  24.     }
  25. }, function(ret) {
  26.    //下拉刷新被触发，自动进入加载状态，使用 reloadData() 手动结束加载中状态
  27.     alert('开始加载刷新数据，摇一摇停止加载状态');
  28.     api.addEventListener({
  29.         name: 'shake'
  30.     }, function(ret, err) {
  31.         UIListGroup.reloadData();
  32.     });
  33. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setRefreshFooter

设置上拉加载，通过 appendData 收起上拉加载组件

setRefreshFooter({params}, callback())

params

bgColor：

  • 类型：字符串
  • 描述：（可选项）上拉加载区域的背景色，支持 rgb、rgba、#
  • 默认值：’#f5f5f5’

callback(ret)

上拉加载的事件回调

示例代码

  1. var UIListGroup = api.require('UIListGroup');
  2. UIListGroup.setRefreshFooter({
  3.     bgColor: '#F5F5F5'
  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及更高版本

stopRefresh

停止上拉加载

stopRefresh

示例代码

  1. var UIListGroup = api.require('UIListGroup');

可用性

iOS系统

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。