nuke-qn-picker v2.0.0

QNPicker

• category: UI
• chinese: 选择器
• type: UI组件

何时使用

千牛定制 Picker , 有一个数据列表，希望用户操作选择其中一项时。支持一位数据和二维数据

API

Picker.show(options,onNotify,onCancel,afterOpen,onFail)

• options 参数

• onNotify：Picker点击确认触发的事件
• onCancel：Picker取消触发的事件
• afterOpen：Picker成功渲染触发的事件
• onFail ：Picker点击取消后触发的事件

• dataSource 结构

//一维
[
    {key:'1',value:'第一排'},
    {key:'2',value:'第二排'},
    {key:'3',value:'第三排'},
    {key:'4',value:'第四排'}
    ]

//级联
[
    {
        value: '浙江',
        key: '1111',
        children: [{
            value: '杭州',
            key: '310000'
        },{
            value: '宁波',
            key: '315000'
        }]
    }, {
        value: '江苏',
        key: '11222',
        children: [{
            value: '南京',
            key: '210000'
        },{
            value: '无锡',
            key: '214000'
        },{
            value: '镇江',
            key: '212000'
        }]
    }
]

• selectedKey

//一维
selectedKey:'2'
//级联
selectedKey:['11222','210000']

Picker.show({title:'请选择',dataSource:dataSource,selectedKey:'2',maskClosable:true},
    (e)=>{
        console.log('select item ',e)
        //选择某一项
        // [{key:'2',value:'第二排'}]
        // 级联的情况
        // [{key:'11222',value:'江苏'},{key:'210000',value: '南京'}]

    },(e)=>{
        // {cancel:true}
        console.log('cancel',e)
    },()=>{
        console.log('success rendered')
    },()=>{
        console.log('fail to render picker')
    });

Picker.hide()(for h5)

• 手动关闭picker的方法，不用传任何参数。