UIListInformation

来自于:AC模块工作室立即使用

概述

UIListInformation 展示了一个联系人列表。开发者只需传入数据源,模块会自动将联系人排序,展示出来。列表右侧字母导航条会自动随联系人数量调整。可以设置侧滑按钮。

open

打开列表

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,   //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
    h: 200  //(可选项)数字类型;模块的高度;默认:w * 2.0/3.0
}

contacts:

  • 类型:数组对象
  • 描述:列表数据源
  • 内部字段:
[{    
      title: '柚子移动科技',                  //字符串类型;条目的标题;
      subTitle: '广东深圳|互联网|2018/09/19',  //字符串类型;条目的子标题,不传则不显示
      stage:{    //字符串类型:条目的阶段
                 stage1:'阶段11>',  //字符串类型:阶段1
                 color1:'#F6F6F8', //字符串类型:阶段1文本颜色
                 stage2:'阶段22>', //字符串类型:阶段2
                 color2:'#F6F6F8',//字符串类型:阶段2文本颜色
                 stage3:'阶段33>', //字符串类型:阶段3
                 color3:'#EE2C2C',//字符串类型:阶段3文本颜色
                 stage4:'阶段44>', //字符串类型:阶段4
                 color4:'#F6F6F8' //阶段4文本颜色
                   },

      tag:{  //字符串类型;条目的标签;
               tag1:'阶段1>',
               color1:'#F6F6F8',
               tag2:'阶段2>',
               color2:'#F6F6F8',
               tag3:'阶段3>',
               color3:'#EE2C2C',
                   },
      price:'10000000' ,      //字符串类型;条目的价格;
      rightImage:'widget://', //字符串类型;条目右边的图片未点击状态;
      chooserightImage:'widget://image/edit.png', //字符串类型;条目右边的图片点击状态;
      rightBtns: []          //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]

rightBtns:

  • 类型:数组
  • 描述:(可选项)列表项向左滑动露出的按钮组,建议:配置列表每项的通用按钮,用此参数;配置某一项的特定按钮,可在 data 数组的指定项传入 rightBtns 参数
  • 内部字段:
[{
    bgColor: '#388e8e', //(可选项)字符串类型;删除布局背景色,支持 rgb、rgba、#;默认:'#388e8e'
    width: 70,          //(可选项)数字类型;删除布局宽度;默认:w / 4       
    icon: '',           //字符串类型;删除图标路径(本地路径,支持fs://、widget://),水平、垂直居中,图标为正方形
    iconWidth: 20       //(可选项)数字类型;删除图标宽度,图标为正方形;默认:20
}]

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块头部的样式
  • 内部字段:
styles:{
    rank:false,//         是否带有筛选排序功能 可选项默认false
    selectIcon:{                         // JSON对象;选择图标设置
    normalIcon:'',                  //(可选项)字符串类型;非选中状态的图标(支持widget:// fs://)
    selectedIcon:'',                //(可选项)字符串类型;选中状态的图标(支持widget:// fs://)
    size:16                        //(可选项)字符串类型;图标的大小
    },
    deleteIcon:{                        // JSON对象;选择图标设置
    icon:'',                       //(可选项)字符串类型;删除图标(支持widget:// fs://)
    size:16                        //(可选项)字符串类型;图标的大小
    },
   alphabetColor:'#000',                //(可选项)字符串类型;右侧字母索引的颜色,支持rgb、rgba、#;默认:'#000',
   alphabetFont:12 ,                    //(可选项)数字类型;右侧字母索引的字母大小;默认:12 **注意:iOS不支持此参数**
   leftAlphabetColor:'#000',            //(可选项)字符串类型;左侧字母索引的颜色,支持rgb、rgba、#;默认:'#000'
   leftAlphabetFont:12 ,                //(可选项)数字类型;左侧字母索引的字母大小;默认:12 
   leftAlphabetHeight:20,               //(可选项)数字类型;//左侧字母的索引的外布局背景高度,此参数设置应该大于字母大小 默认20   (iOS不支持) 
   sectionIndexBgColor:'rgba(0,0,0,0)', //(可选项)字符串类型;右侧索引的背景颜色,支持rgb、rgba、#;默认:'rgba(0,0,0,0)'
   sectionIndexTrackingBgColor:'rgba(0,0,0,0)', //(可选项)字符串类型;选中时,右侧索引的背景颜色,支持rgb、rgba、#;默认:'rgba(0,0,0,0)'
   alphabetBg:'#e1e1e1',             //(可选项)字符串类型;横向字母索引的背景颜色,支持rgb、rgba、#;默认:'#e1e1e1'
   isHideGroupHeader:false,           //(可选项)布尔类型;是否隐藏分组header;默认:false
   indexer:{                          //(可选项)设置索引条的上下边距(该参数仅支持android)
                marginTop: 30,          //(可选项)数字类型;索引上边距;默认:0
                marginBottom:30         //(可选项)数字类型;索引下边距;默认:0
                    }, 
   item: {                           //(可选项)JSON对象;列表项的样式
            dividingLine:{     //(可选项)JSON对象;分割线样式
              leftMargin:5,               //(可选项)数字类型;分割线的宽度,默认:和文字的左边对齐
              lineHeight:0.5,             //(可选项)数字类型;分割线的高度,默认:0.5
              lineColor:'#e4e4e4',        //(可选项)字符串类型;分割线的颜色,默认:'#e4e4e4'
             },
            bgColor: '#AFEEEE',             //(可选项)字符串类型;列表项的背景色,支持 rgb、rgba、#;默认:'#AFEEEE'
            activeBgColor: '#F5F5F5',       //(可选项)字符串类型;列表项按下时的背景色,支持 rgb、rgba、#;默认:'#F5F5F5'

            height: 100,                    //(可选项)数字类型;列表项的高度;默认:100(andrroid自适应高度)
            rightIconMarginRight:30,       //(可选项)数字类型;列表项右侧图片的右边距;默认:10
            marginLeft:10,                 //(可选项)数字类型;列表项的(title,subTitle,stage,tag)的左边距;默认:10
            titleSize: 16,                 //(可选项)数字类型;列表项标题文字大小;默认:12
            titleColor: '#333333',         //(可选项)字符串类型;列表项标题文字颜色,支持 rgb,rgba,#;默认:'#000000'
            titleWidth: 176,               //(可选项)数字类型;列表项标题文字的宽度;默认:100
            subTitleSize: 14,             //(可选项)数字类型;列表项子标题文字大小;默认:12
            subTitleColor: '#4F94CD',     //(可选项)字符串类型:列表项子标题文字颜色,支持 rgb、rgba、#;默认:'#000000' 
            subTitleWidth:180,            //(可选项)数字类型;列表项子标题文字的宽度;默认:100
             stageSize: 13,                //(可选项)数字类型;列表项阶段文字大小;默认:12
            stageWidth: 100,              //(可选项)数字类型;列表项阶段文字的宽度;默认:100
            tagSize: 12,                  //(可选项)数字类型;列表项标签文字大小;默认:12
            tagWidth: 100,                //(可选项)数字类型;列表项标签文字的宽度;默认:100
            priceSize: 12,                //(可选项)数字类型;列表项价格文字大小;默认:12
            priceColor: '#000',           //(可选项)字符串类型:列表项价格文字颜色,支持 rgb、rgba、#;默认:'#000000' 
            priceWidth: 100,              //(可选项)数字类型;列表项价格文字的宽度;默认:100
       }

}

rightButtonInfo:

  • 类型:json对象
  • 描述:(可选项)列表右边按钮相关设置,设置后点击将会弹出扇形页面,不传将不会弹出
  • 内部字段:
[{               
     image:''               //字符类型;图片地址,仅支持本地图片(支持widget、fs)
   }]

backgroundColor:

  • 类型:字符串
  • 描述:(可选项)模块背景色
  • 默认:'#fff'

bounces:

  • 类型:布尔
  • 描述:(可选项)是否弹动
  • 默认:false

fixedOn:

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
   eventType: 'show', // 字符串类型;交互事件类型,取值范围如下:
                      // show:模块打开,数据排序成功显示在屏幕事件
                      //rightClick:右边图片的点击事件
                      //clickRightBtn(点击侧滑出现的右侧按钮)
                      //clickPopupBtn(点击弹窗按钮)
                      //click:用户点击事件
                      //deleted    (列表删除事件,只有列表模式为删除且触发删除时返回)
                      //selected   (列表选择事件,只有列表模式为选择且触发选择时返回)
                      //unselected (列表选择事件,只有列表模式为非选择且触发非选择时返回)
   key: 'A',          //字符串类型;当rank=true返回 ,被点击的条目所在的区域的标题,仅当 eventType 为 click 时有值  
   section: 0,        //数字类型;  当rank=true返回 被点击的条目所在的区域在所有区域中的索引,仅当 eventType 为 click 时有值   
   index: 0,          //数字类型;  当rank=true时 返回被点击的条目在所在区域内的索引,仅当 eventType 为 click 时有值  当rank=false时 返回点击条目的索引
   btnIndex: 0         //数字类型;列表项侧滑出现的按钮的索引
   contact: {}        //JSON 对象;所选条目的联系人信息,内容同传入的数据一致,仅当 eventType 为 click 时有值
   infoIndex: 0         //数字类型;列表项右边按钮弹窗索引

}

示例代码

var UIListInformation = api.require('UIListInformation');
            UIListInformation.open({
                rect : {
                    x : 0,
                    y : 44,
                    w : api.frameWidth,
                    h : api.frameHeight - 104
                },
                contacts : [{
                  title: '柚子移动科技', 
                subTitle: '广东深圳|互联网|2018/09/19',                
                stage:'阶段1>阶段2>阶段3>阶段4'      
                tag:'标签名称1/标签名称2'            
                price:'10000000'            
                rightImage:'widget://'  ,
                uid:1001                   
                }, {
                    title: '柚子移动科技', 
                subTitle: '广东深圳|互联网|2018/09/19',                
                stage:'阶段1>阶段2>阶段3>阶段4',     
                tag:'标签名称1/标签名称2',            
                price:'10000000',            
                rightImage:'widget://' ,
                uid:1002                    
                }],
                fixedOn : api.frameName,
                bounces:true
            }, function(ret) {
                if (ret) {
                    alert(JSON.stringify(ret));
                }
            });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭列表模块

close()

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏列表模块,并没有从内存里清除

hide()

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的列表模块

show()

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getIndex

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

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

params

key:

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

value:

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

callback(ret)

ret:

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

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.getIndex({
    key: 'uid',
    value: '1001'
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getDataByIndex

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

getDataByIndex({params}, callback(ret))

params

index:

  • 类型:数字
  • 描述:(可选项)列表项的索引
  • 默认值:0

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    data: []    //数组类型;当前列表项的数据,内部字段与 open 时的 data 参数一致
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.getDataByIndex({
    index: 0
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params}, callback(ret))

params

contacts:

  • 类型:数组
  • 描述:(可选项)列表的数据源,若不传或传空,仅收起下拉刷新组件
  • 内部字段:
[{    
      title: '柚子移动科技',          //字符串类型;条目的标题;
      subTitle: '广东深圳|互联网|2018/09/19',                        //字符串类型;条目的子标题,不传则不显示
      stage:'阶段1>阶段2>阶段3>阶段4' //字符串类型;条目的阶段;
      tag:'标签名称1/标签名称2'       //字符串类型;条目的标签;
      price:'10000000'             //字符串类型;条目的价格;
      rightImage:'widget://'       //字符串类型;条目右边的图片;
      rightBtns: []                //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false     
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.reloadData({
    contacts: [{

    }]
}, function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

deleteItem

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

deleteItem({params}, callback(ret))

params

index:

  • 类型:数字
  • 描述:(可选项)数据列表的索引
  • 默认值:0

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true       //布尔型;true||false
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.deleteItem({
    index: 2
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateItem

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

updateItem({params}, callback(ret))

params

index:

  • 类型:数字
  • 描述:(可选项)数据列表的索引
  • 默认值:0

contacts:

  • 类型:JSON 对象
  • 描述:列表的数据源
  • 内部字段:
{    
      title: '柚子移动科技',          //字符串类型;条目的标题;
      subTitle: '广东深圳|互联网|2018/09/19',                        //字符串类型;条目的子标题,不传则不显示
      stage:'阶段1>阶段2>阶段3>阶段4' //字符串类型;条目的阶段;
      tag:'标签名称1/标签名称2'       //字符串类型;条目的标签;
      price:'10000000'             //字符串类型;条目的价格;
      rightImage:'widget://'       //字符串类型;条目右边的图片;
      rightBtns: []                //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true     //布尔型;true||false
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.updateItem({
    index: 2,
    contacts: {

        title: '刷新标题',
        subTitle: '刷新子标题',

    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendData

向列表末端追加数据

appendData({params}, callback(ret))

params

contacts:

  • 类型:数组对象
  • 描述:列表的数据源,若不传或传空,仅收起上拉加载组件
  • 内部字段:
[{    
      title: '柚子移动科技',          //字符串类型;条目的标题;
      subTitle: '广东深圳|互联网|2018/09/19',                        //字符串类型;条目的子标题,不传则不显示
      stage:'阶段1>阶段2>阶段3>阶段4' //字符串类型;条目的阶段;
      tag:'标签名称1/标签名称2'       //字符串类型;条目的标签;
      price:'10000000'             //字符串类型;条目的价格;
      rightImage:'widget://'       //字符串类型;条目右边的图片;
      rightBtns: []                //(可选项)数组类型;列表项向左滑动露出的按钮组,配置某一项的特定按钮组,若不传则显示通用按钮,内部字段同下方 rightBtns 参数
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.appendData({
    contacts: [{

        title: '新增标题',
        subTitle: '新增子标题',
    }]
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRefreshHeader

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

setRefreshHeader({params}, callback(ret))

params

loadingImg:

  • 类型:字符串
  • 描述:下拉刷新时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)

bgColor:

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

textColor:

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

textDown:

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

textUp:

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

callback()

下拉刷新的事件回调

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.setRefreshHeader({
    loadingImg: 'widget://res/UIListView_arrow.png',
    bgColor: '#F5F5F5',
    textColor: '#8E8E8E',
    textDown: '下拉可以刷新...',
    textUp: '松开开始刷新...',
    showTime: true
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setRefreshFooter

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

setRefreshFooter({params}, callback())

params

loadingImg:

  • 类型:字符串
  • 描述:上拉加载时显示的小箭头图标的本地路径,要求本地路径(fs://、widget://)

bgColor:

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

callback(ret)

上拉加载的事件回调

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.setRefreshFooter({
    loadingImg: 'widget://res/UIListView_arrow.png',
    bgColor: '#F5F5F5',
    textColor: '#8E8E8E',
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setListMode

设置列表模式

setListMode()

params

mode:

  • 类型:字符串
  • 描述:列表模式
  • 取值范围:
    • select
    • delete
    • normal

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.setListMode({
    mode:'select'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getListMode

获取列表模式

getListMode()

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    mode:'select' // 字符串类型;列表模式;取值范围:
                                        // select 选择模式
                                        // delete 删除模式
}

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.getListMode(function(ret){
    alert(JSON.stringify(ret));    
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

sort

排序

sort({params}, callback(ret))

params

sort:

  • 类型:数字
  • 描述:(可选项)排序;0:正序,1:倒序
  • 默认值:0

示例代码

var UIListInformation = api.require('UIListInformation');
UIListInformation.sort({
    sort:0,
});

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本