PickerView
嵌入页面的滚动选择器

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 说明
√ x x value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
√ x x indicatorStyle String 设置选择器中间选中框的样式
√ x x indicatorClass String 设置选择器中间选中框的类名
√ x x maskStyle String 设置蒙层的样式
√ x x maskClass String 设置蒙层的类名
√ x x onChange EventHandle 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
PickerViewColumn
仅可放置于 PickerView 中，其孩子节点的高度会自动设置成与 PickerView 的选中框的高度一致
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, PickerView, PickerViewColumn } from '@tarojs/components'
  4. export default class Picks extends Component {
  6.   constructor() {
  7.     super(...arguments)
  8.     const date = new Date()
  9.     const years = []
  10.     const months = []
  11.     const days = []
  12.     for (let i = 1990; i <= date.getFullYear(); i++) {
  13.       years.push(i)
  14.     }
  15.     for (let i = 1; i <= 12; i++) {
  16.       months.push(i)
  17.     }
  18.     for (let i = 1; i <= 31; i++) {
  19.       days.push(i)
  20.     }
  21.     this.state = {
  22.       years: years,
  23.       year: date.getFullYear(),
  24.       months: months,
  25.       month: 2,
  26.       days: days,
  27.       day: 2,
  28.       value: [9999, 1, 1],
  29.     }
  30.   }
  32.   onChange = e => {
  33.     const val = e.detail.value
  34.     this.setState({
  35.       year: this.state.years[val[0]],
  36.       month: this.state.months[val[1]],
  37.       day: this.state.days[val[2]],
  38.       value: val
  39.     })
  40.   }
  42.   render() {
  43.     return (
  44.       <View>
  45.         <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
  46.         <PickerView indicatorStyle="height: 50px;" style="width: 100%; height: 300px;" value={this.state.value} onChange={this.onChange}>
  47.           <PickerViewColumn>
  48.             {this.state.years.map(item => {
  49.               return (
  50.                 <View>{item}年</View>
  51.               );
  52.             })}
  53.           </PickerViewColumn>
  54.           <PickerViewColumn>
  55.             {this.state.months.map(item => {
  56.               return (
  57.                 <View>{item}月</View>
  58.               );
  59.             })}
  60.           </PickerViewColumn>
  61.           <PickerViewColumn>
  62.             {this.state.days.map(item => {
  63.               return (
  64.                 <View>{item}日</View>
  65.               );
  66.             })}
  67.           </PickerViewColumn>
  68.         </PickerView>
  69.       </View>
  70.     )
  71.   }
  72. }