Picker 选择器

API#

Picker 组件采用静态方法形式调用。

Picker.show(params,onSelect,onCancel)

params 对象包含下面几个基本属性

属性 说明 类型 默认值
dataSource 数据源 array
title 标题 string
selectedKey 已选择的key string
onCancel 取消时触发的事件 function
onSelect 选中时触发事件 function

代码演示


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Button, Modal,Picker } from 'nuke';
import {mount} from 'nuke-mounter';

let ds=[{key:'111',value:'大家好'},{key:'222',value:'aaa'},{key:'333',value:'aaa'},{key:'11111',value:'aaa'},{key:'3443423',value:'aaa'},{key:'765675',value:'aaa'},{key:'1232132123',value:'aaa'},{key:'4455555',value:'aaa'}]

let App = class NukeDemoIndex extends Component {
    constructor() {
        super(); 
    }

    press() {
        Picker.show({title:'请选择',dataSource:ds,maskClosable:true},function(e){
            console.log('select item ',e)
        },function(e){
            console.log('canceled')
        });
        Modal.toast('4444444')   
    }

    render() {
        return (
            <View>
                <View style={{flexDirection:'row',marginBottom:'20rem'}}>
                    <Button onPress={this.press.bind(this)} type="normal">点我选择</Button>
                </View>
            </View>

        );
    }
}

mount(<App/>, mountNode);

普通。

mobile phone header