UILinkedPicker

概述

UILinkedPicker 是自定义分级联动选择器插件,支持自定义选择器的大小、位置、内容及其级别(android暂仅最大支持3级)和数据源,可手动设置指定选中项,用于实现固定取值范围的内容选择器,多项内容之间有级联关系;本插件和 UISelector 插件相似,与之相比数据源格式不同,本插件几点信息数据支持自定义

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  //(可选项)数字类型;插件的高度;默认:w
}

styles:

  • 类型:JSON 对象
  • 描述:(可选项)插件各部分的样式
  • 内部字段:
{
    bg: 'rgba(0,0,0,0)',     //(可选项)字符串类型;插件背景,支持 rgb、rgba、#,图片路径(本地路径,fs://、widget://);默认:'rgba(0,0,0,0)'
    text:{                   //(可选项)JSON对象;字体样式;默认值见内部字段
       size: 22,             //(可选项)数字类型;字体大小;默认值:22
       selected: '#fff',     //(可选项)字符串类型;选中字体色,支持 rgb、rgba、#;默认#fff
       normal: '#000'        //(可选项)字符串类型;常态字体色;支持 rgb、rgba、#;默认#000
    },
    item:{                   //(可选项)JSON对象;item 样式;默认值见内部字段
      w: 80,                 //(可选项)数字类型;背景视图的宽;默认值:单元格宽-20
      h: 45,                 //(可选项)数字类型;背景视图的高;默认值:单元格高-20
      normal: '#87ceeb',     //(可选项)字符串类型;常态背景色,支持 rgb、rgba、#;默认值:#87ceeb
      selected: '#218868',   //(可选项)字符串类型;选中后的背景色,支持 rgb、rgba、#;默认值:#218868
      zoomIn: 1.2            //(可选项)数字类型;选中后放大倍数,;默认值:1.2
    }
}

data:

  • 类型:数组对象/字符串
  • 描述:选择器的数据源,若为字符串,则表示 json 文件的路径(支持 widget://、fs:// 协议),文件格式同下文内部字段
  • 内部字段:
[{
      value:   		//JSON对象;结点信息,本数据字段内容可自定义,自定义的结点信息数据会在选中后返回给前端
      children:		//数组类型;结点子级目录的信息组成的数组,类型为 JSON 对象。若该对象内包含 children 字段数据,则表示该结点有子级目录;
       
}]
                    //举例如下:
                    //一级选择器:[{
                      'value':{
                        'id':1,
                        'name':'A'
                      }
                    },{
                      'value':{
                        'id':2,
                        'name':'B'
                      }
                    },{
                      'value':{
                        'id':3,
                        'name':'C'
                      }
                    },{
                      'value':{
                        'id':4,
                        'name':'D'
                      }
                    }]
                    //二级选择器: [{
                      'value':{
                        'id':10,
                        'name':'A'
                      },
                      'children':[{
                          'value':{
                            'id':11,
                            'name':'10'
                          }
                        },{
                          'value':{
                            'id':12,
                            'name':'11'
                          }
                        },{
                          'value':{
                            'id':13,
                            'name':'12'
                          }
                        },{
                          'value':{
                            'id':14,
                            'name':'13'
                          }
                        }]
                    },{
                      'value':{
                        'id':20,
                        'name':'B'
                      },
                      'children':[{
                          'value':{
                            'id':21,
                            'name':'20'
                          }
                        },{
                          'value':{
                            'id':22,
                            'name':'21'
                          }
                        },{
                          'value':{
                            'id':23,
                            'name':'22'
                          }
                        },{
                          'value':{
                            'id':24,
                            'name':'23'
                          }
                        }]
                    },{
                      'value':{
                        'id':30,
                        'name':'C'
                      },
                      'children':[{
                          'value':{
                            'id':31,
                            'name':'30'
                          }
                        },{
                          'value':{
                            'id':32,
                            'name':'31'
                          }
                        },{
                          'value':{
                            'id':33,
                            'name':'32'
                          }
                        },{
                          'value':{
                            'id':34,
                            'name':'33'
                          }
                        }]
                    },{
                      'value':{
                        'id':40,
                        'name':'D'
                      },
                      'children':[{
                          'value':{
                            'id':41,
                            'name':'40'
                          }
                        },{
                          'value':{
                            'id':42,
                            'name':'41'
                          }
                        },{
                          'value':{
                            'id':43,
                            'name':'42'
                          }
                        },{
                          'value':{
                            'id':44,
                            'name':'43'
                          }
                        }]
                    }]
                    //三级选择器:  [{
                      'value':{
                        'id':10,
                        'name':'A'
                      },
                      'children':[{
                          'value':{
                            'id':11,
                            'name':'10'
                          },
                          'children':[{
                                 'value':{
                                    'id':111,
                                    'name':'301'
                                 }
                              },{
                                 'value':{
                                    'id':112,
                                    'name':'302'
                                 }
                           }]
                        },{
                          'value':{
                            'id':12,
                            'name':'11'
                          },
                          'children':[{
                                 'value':{
                                    'id':211,
                                    'name':'303'
                                 }
                              },{
                                 'value':{
                                    'id':212,
                                    'name':'304'
                                 }
                           }]
                        },{
                          'value':{
                            'id':13,
                            'name':'12'
                          },
                          'children':[{
                                 'value':{
                                    'id':311,
                                    'name':'331'
                                 }
                              },{
                                 'value':{
                                    'id':312,
                                    'name':'332'
                                 }
                           }]
                        },{
                          'value':{
                            'id':14,
                            'name':'13'
                          },
                          'children':[{
                                 'value':{
                                    'id':411,
                                    'name':'341'
                                 }
                              },{
                                 'value':{
                                    'id':412,
                                    'name':'342'
                                 }
                           }]
                        }]
                    },{
                      'value':{
                        'id':20,
                        'name':'B'
                      },
                      'children':[{
                          'value':{
                            'id':21,
                            'name':'20'
                          },
                          'children':[{
                                 'value':{
                                    'id':213,
                                    'name':'213'
                                 }
                              },{
                                 'value':{
                                    'id':214,
                                    'name':'214'
                                 }
                           }]
                        },{
                          'value':{
                            'id':22,
                            'name':'21'
                          },
                          'children':[{
                                 'value':{
                                    'id':221,
                                    'name':'221'
                                 }
                              },{
                                 'value':{
                                    'id':222,
                                    'name':'222'
                                 }
                           }]
                        },{
                          'value':{
                            'id':23,
                            'name':'22'
                          },
                          'children':[{
                                 'value':{
                                    'id':231,
                                    'name':'231'
                                 }
                              },{
                                 'value':{
                                    'id':232,
                                    'name':'232'
                                 }
                           }]
                        },{
                          'value':{
                            'id':24,
                            'name':'23'
                          },
                          'children':[{
                                 'value':{
                                    'id':241,
                                    'name':'241'
                                 }
                              },{
                                 'value':{
                                    'id':242,
                                    'name':'242'
                                 }
                           }]
                        }]
                    },{
                      'value':{
                        'id':30,
                        'name':'C'
                      },
                      'children':[{
                          'value':{
                            'id':31,
                            'name':'30'
                          },
                          'children':[{
                                 'value':{
                                    'id':311,
                                    'name':'311'
                                 }
                              },{
                                 'value':{
                                    'id':312,
                                    'name':'312'
                                 }
                           }]
                        },{
                          'value':{
                            'id':32,
                            'name':'31'
                          },
                          'children':[{
                                 'value':{
                                    'id':321,
                                    'name':'321'
                                 }
                              },{
                                 'value':{
                                    'id':322,
                                    'name':'322'
                                 }
                           }]
                        },{
                          'value':{
                            'id':33,
                            'name':'32'
                          },
                          'children':[{
                                 'value':{
                                    'id':331,
                                    'name':'331'
                                 }
                              },{
                                 'value':{
                                    'id':331,
                                    'name':'332'
                                 }
                           }]
                        },{
                          'value':{
                            'id':34,
                            'name':'33'
                          },
                          'children':[{
                                 'value':{
                                    'id':341,
                                    'name':'341'
                                 }
                              },{
                                 'value':{
                                    'id':342,
                                    'name':'342'
                                 }
                           }]
                        }]
                    },{
                      'value':{
                        'id':40,
                        'name':'D'
                      },
                      'children':[{
                          'value':{
                            'id':41,
                            'name':'40'
                          },
                          'children':[{
                                 'value':{
                                    'id':411,
                                    'name':'411'
                                 }
                              },{
                                 'value':{
                                    'id':412,
                                    'name':'412'
                                 }
                           }]
                        },{
                          'value':{
                            'id':42,
                            'name':'41'
                          },
                          'children':[{
                                 'value':{
                                    'id':421,
                                    'name':'421'
                                 }
                              },{
                                 'value':{
                                    'id':422,
                                    'name':'422'
                                 }
                           }]
                        },{
                          'value':{
                            'id':43,
                            'name':'42'
                          },
                          'children':[{
                                 'value':{
                                    'id':431,
                                    'name':'431'
                                 }
                              },{
                                 'value':{
                                    'id':432,
                                    'name':'432'
                                 }
                           }]
                        },{
                          'value':{
                            'id':44,
                            'name':'43'
                          },
                          'children':[{
                                 'value':{
                                    'id':441,
                                    'name':'441'
                                 }
                              },{
                                 'value':{
                                    'id':442,
                                    'name':'442'
                                 }
                           }]
                        }]
                    }]

rows:

  • 类型:数字
  • 描述:(可选项)滚动内容时可见的内容行数,只接受大于1的奇整数。
  • 默认值:5

indexs:

  • 类型:数组
  • 描述:(可选项)各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值:[0,0...] //数组个数和级数对应

bounce:

  • 类型:布尔
  • 描述:(可选项)列表滑动到头是否弹动
  • 默认值:true

fixedOn:

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

fixed:

  • 类型:布尔
  • 描述:(可选项)插件是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
   eventType:'show',               //字符串类型;交互事件的类型;
                                   //取值范围:
                                   //show(插件打开成功)
                                   //selected(选择器选中内容)
   selects:[{                      //数组类型;从各级目录选取的内容信息组成的数组,若选择器是自定义的二级选择器,则本数组包含两个元素,若选择器是自定义的三级选择器,则此数组包含三个元素
       index: 1,                   //数字类型;选取的数据在所在数组内的索引
       value: {'id':1,'name':'北京'}//JSON对象;可自定义的结点的信息
   }]
}

示例代码

var UILinkedPicker = api.require('UILinkedPicker');
UILinkedPicker.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    styles: {
        bg: 'rgba(0,0,0,0)',
        text: {
            size: 14,
            selected: '#fff',
            normal: '#000'
        },
        item: {
            w: 80,
            h: 45,
            normal: '#87ceeb',
            selected: '#218868',
            zoomIn: 1.2
        }
    },
    rows: 5,
    indexs: [1, 2, 3],
    bounce: false,
    fixedOn: api.frameName,
    fixed: false,
    data: [{
        'value': {
            'id': 1,
            'name': 'A'
        }
    }, {
        'value': {
            'id': 2,
            'name': 'B'
        }
    }, {
        'value': {
            'id': 3,
            'name': 'C'
        }
    }, {
        'value': {
            'id': 4,
            'name': 'D'
        }
    }, {
        'value': {
            'id': 5,
            'name': 'E'
        }
    }, {
        'value': {
            'id': 6,
            'name': 'F'
        }
    }, {
        'value': {
            'id': 7,
            'name': 'G'
        }
    }, {
        'value': {
            'id': 8,
            'name': 'H'
        }
    }, {
        'value': {
            'id': 9,
            'name': 'I'
        }
    }, {
        'value': {
            'id': 10,
            'name': 'J'
        }
    }]
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

set

设置选择器的选中项

set({params})

params

indexs:

  • 类型:数组
  • 描述:(可选项)各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值:[0,0...]//数组个数和级数对应

示例代码

var UILinkedPicker = api.require('UILinkedPicker');
UILinkedPicker.set({
    indexs: [2, 3, 6]
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭选择器

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏选择器

hide()

示例代码

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

补充说明

隐藏选择器,并没有从内存里清除

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的选择器

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

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