SearchBar 搜索框

属性 说明 类型 默认值
value 默认值 string
placeholder placeholder string
menuIndex 菜单默认选中的项 number 0
menuData 菜单数组 array
onClickMenu 菜单点击事件 function(index)
onChange 搜索框change事件 function(value,e)

代码演示


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


let App = class NukeDemoIndex extends Component {
    constructor() {
        super(); 
        this.state = {
            target: null,
            menuIndex: 0,
            menuData:['宝贝','店铺']
        }
    }

    changeHandler=(value, e)=>{
        this.setState({
            value: value,
        });
    }
    clickSearchMenuHandler=(index)=>{
        console.log(index);
    }
    render() {
        return (
            <ScrollView>


                 <SearchBar style={{marginTop:'60rem'}}
                        value={this.state.value}
                        placeholder="Enter search keywords..."
                        menuIndex={this.state.menuIndex}
                        menuData={this.state.menuData}
                        onClickMenu={this.clickSearchMenuHandler} onChange={this.changeHandler} />
                <View style={{marginTop:'40rem'}}><Text>要搜索的是:{this.state.value}</Text></View>

            </ScrollView>

        );
    }
}

mount(<App/>, mountNode);

普通

mobile phone header