PickerView 选择器

PickerView 的功能类似于 Picker ,但它是直接渲染在区域中,而不是弹出窗口。

代码演示

选择器

  1. import { PickerView } from 'antd-mobile';
  2. const seasons = [
  3. [
  4. {
  5. label: '2013',
  6. value: '2013',
  7. },
  8. {
  9. label: '2014',
  10. value: '2014',
  11. },
  12. ],
  13. [
  14. {
  15. label: '春',
  16. value: '春',
  17. },
  18. {
  19. label: '夏',
  20. value: '夏',
  21. },
  22. ],
  23. ];
  24. class PickerViewExample extends React.Component {
  25. state = {
  26. value: null,
  27. };
  28. onChange = (value) => {
  29. console.log(value);
  30. this.setState({
  31. value,
  32. });
  33. };
  34. render() {
  35. return (
  36. <PickerView
  37. onChange={this.onChange}
  38. value={this.state.value}
  39. data={seasons}
  40. cascade={false}
  41. />
  42. );
  43. }
  44. }
  45. ReactDOM.render(<PickerViewExample />, mountNode);

PickerView选择器 - 图1

API

适用平台:WEB、React-Native
属性说明类型默认值
data数据源Array<{value, label}> / Array<Array<{value, label}>>-
value值, 格式是[value1, value2, value3], 对应数据源的相应级层valueArray-
cascade是否级联Booleantrue
cols列数Number3
onChange选中后的回调,可使用rc-form(val): void-
prefixCls (Web Only)prefix classstringam-picker
pickerPrefixCls (Web Only)picker prefix classstringam-picker-col
itemStyle每列样式Object-
indicatorStyleindicator 样式Object-