groupList

概述

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

图片说明

open

打开

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

params

rect:

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

styles:

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

datas:

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

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

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

示例代码

var groupList = api.require('groupList');
groupList.open({
    rect: {
        x: 0,
        y: 0,
        w: 320,
        h: 480
    },
    styles: {
        bg: '#eee',
        title: {
            bg: '#E0E0E0',
            h: 25,
            align: 'left',
            color: '#838383',
            size: 15,
            marginT: 7,
            marginL: 18
        },
        cell: {
            bg: '#fff',
            h: 68,
            main: {
                marginL: 74,
                marginT: 17,
                color: '#636363',
                size: 13,
            },
            sub: {
                marginL: 74,
                marginT: 8,
                color: '#999999',
                size: 12,
            },
            icon: {
                marginL: 15,
                marginT: 9,
                w: 50,
                h: 50,
                corner: 25
            },
            handler: {
                url: 'fs://handler.png',
                marginR: 20,
                marginT: 25,
                w: 18,
                h: 18
            },
            options: [{
                w: 76,
                bg: 'rgba(0,0,0,0)',
                title: '关注',
                align: 'center',
                marginB: 13,
                color: '#fff',
                size: 11
            }],
            line: {
                h: 0.8,
                marginL: 0,
                marginR: 0,
                bg: '#eee',
            }
        }
    },
    datas: [{
        title: '分组标题',
        cells: [{
            icon: 'fs://creater.png',
            main: '张泉灵',
            sub: '活跃值:200',
            options: [{
                w: 76,
                bg: 'rgba(0,0,0,0)',
                title: '关注',
                align: 'center',
                marginB: 13,
                color: '#fff',
                size: 11
            }],
            handler: {
                url: 'fs://handler.png',
                marginR: 20,
                marginT: 25,
                w: 18,
                h: 18
            }
        }]
    }],
    fixedOn: api.frameName,
    fixed: true
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭 groupList 列表视图

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reloadData

刷新列表数据

reloadData({params})

params

datas:

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

示例代码

var groupList = api.require('groupList');
groupList.reloadData({
    datas: [{
        title: '分组标题',
        cells: [{
            icon: 'fs://creater.png',
            main: '张泉灵',
            sub: '活跃值:200',
            options: [{
                w: 76,
                bg: 'rgba(0,0,0,0)',
                title: '关注',
                align: 'center',
                marginB: 13,
                color: '#fff',
                size: 11
            }],
            handler: {
                url: 'fs://handler.png',
                marginR: 20,
                marginT: 25,
                w: 18,
                h: 18
            }
        }]
    }]
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

removeCellAt

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

removeCellAt({params})

params

groupIndex:

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

cellIndex:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addCellAt

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

addCellAt({params})

params

groupIndex:

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

cellIndex:

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

cell:

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

示例代码

var groupList = api.require('groupList');
groupList.addCellAt({
    groupIndex: 1,
    cellIndex: 2,
    cell: {
        icon: 'fs://creater.png',
        main: '张泉灵',
        sub: '活跃值:200',
        options: [{
            w: 76,
            bg: 'rgba(0,0,0,0)',
            title: '关注',
            align: 'center',
            marginB: 13,
            color: '#fff',
            size: 11
        }],
        handler: {
            url: 'fs://handler.png',
            marginR: 20,
            marginT: 25,
            w: 18,
            h: 18
        }
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateCellAt

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

updateCellAt({params})

params

groupIndex:

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

cellIndex:

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

cell:

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

示例代码

var groupList = api.require('groupList');
groupList.updateCellAt({
    groupIndex: 1,
    cellIndex: 2,
    cell: {
        icon: 'fs://creater.png',
        main: '张泉灵',
        sub: '活跃值:200',
        options: [{
            w: 76,
            bg: 'rgba(0,0,0,0)',
            title: '关注',
            align: 'center',
            marginB: 13,
            color: '#fff',
            size: 11
        }],
        handler: {
            url: 'fs://handler.png',
            marginR: 20,
            marginT: 25,
            w: 18,
            h: 18
        }
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

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 停止下拉状态

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的 groupList 列表视图

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

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

hide()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/07/31