PickerView 选择器

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

代码演示

选择器

  1. import { PickerView, WhiteSpace } from 'antd-mobile';
  3. const seasons = [
  4.   [
  5.     {
  6.       label: '2013',
  7.       value: '2013',
  8.     },
  9.     {
  10.       label: '2014',
  11.       value: '2014',
  12.     },
  13.   ],
  14.   [
  15.     {
  16.       label: '春',
  17.       value: '春',
  18.     },
  19.     {
  20.       label: '夏',
  21.       value: '夏',
  22.     },
  23.   ],
  24. ];
  26. const season = [
  27.   {
  28.     label: '春',
  29.     value: '春',
  30.   },
  31.   {
  32.     label: '夏',
  33.     value: '夏',
  34.   },
  35. ];
  37. const province = [
  38.   {
  39.     label: '北京',
  40.     value: '01',
  41.     children: [
  42.       {
  43.         label: '东城区',
  44.         value: '01-1',
  45.       },
  46.       {
  47.         label: '西城区',
  48.         value: '01-2',
  49.       },
  50.       {
  51.         label: '崇文区',
  52.         value: '01-3',
  53.       },
  54.       {
  55.         label: '宣武区',
  56.         value: '01-4',
  57.       },
  58.     ],
  59.   },
  60.   {
  61.     label: '浙江',
  62.     value: '02',
  63.     children: [
  64.       {
  65.         label: '杭州',
  66.         value: '02-1',
  67.         children: [
  68.           {
  69.             label: '西湖区',
  70.             value: '02-1-1',
  71.           },
  72.           {
  73.             label: '上城区',
  74.             value: '02-1-2',
  75.           },
  76.           {
  77.             label: '江干区',
  78.             value: '02-1-3',
  79.           },
  80.           {
  81.             label: '下城区',
  82.             value: '02-1-4',
  83.           },
  84.         ],
  85.       },
  86.       {
  87.         label: '宁波',
  88.         value: '02-2',
  89.         children: [
  90.           {
  91.             label: 'xx区',
  92.             value: '02-2-1',
  93.           },
  94.           {
  95.             label: 'yy区',
  96.             value: '02-2-2',
  97.           },
  98.         ],
  99.       },
  100.       {
  101.         label: '温州',
  102.         value: '02-3',
  103.       },
  104.       {
  105.         label: '嘉兴',
  106.         value: '02-4',
  107.       },
  108.       {
  109.         label: '湖州',
  110.         value: '02-5',
  111.       },
  112.       {
  113.         label: '绍兴',
  114.         value: '02-6',
  115.       },
  116.     ],
  117.   },
  118. ];
  120. class PickerViewExample extends React.Component {
  121.   state = {
  122.     value: null,
  123.   };
  124.   onChange = (value) => {
  125.     console.log(value);
  126.     this.setState({
  127.       value,
  128.     });
  129.   }
  130.   onScrollChange = (value) => {
  131.     console.log(value);
  132.   }
  133.   render() {
  134.     return (
  135.       <div>
  136.         <PickerView
  137.           onChange={this.onChange}
  138.           onScrollChange={this.onScrollChange}
  139.           value={this.state.value}
  140.           data={seasons}
  141.           cascade={false}
  142.         />
  143.         <WhiteSpace /><WhiteSpace />
  144.         <PickerView
  145.           data={season}
  146.           cascade={false}
  147.         />
  148.         <WhiteSpace /><WhiteSpace />
  149.         <PickerView
  150.           data={province}
  151.           value={['02', '02-1', '02-1-1']}
  152.         />
  153.       </div>
  154.     );
  155.   }
  156. }
  158. ReactDOM.render(<PickerViewExample />, mountNode);

PickerView选择器 - 图1

API

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