Picker 选择器

从底部弹起的滚动选择器，这里用的是微信小程序自带的 Picker 原生组件，taro-ui 引用的是 taro 封装的基础组件。 现支持四种选择器，通过 mode 来区分（默认是普通选择器），分别是：

• 普通选择器
• 多列选择器
• 时间选择器
• 日期选择器

使用指南

在 Taro 文件中引入组件

注意，这边引入的是 taro 的基础组件库，H5 版本的 Picker 字体大小有问题，会在下个版本修复

import { Picker } from '@tarojs/components'

示例

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker } from '@tarojs/components'
export default class PagePicker extends Component {
  state = {
    selector: ['美国', '中国', '巴西', '日本'],
    selectorChecked: '美国',
    timeSel: '12:01',
    dateSel: '2018-04-22'
  }
onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }
onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }
render () {
    return (
      <View className='container'>
        <View className='page-body'>
          <View className='page-section'>
            <Text>地区选择器</Text>
            <View>
              <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                <View className='picker'>
                  当前选择：{this.state.selectorChecked}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>时间选择器</Text>
            <View>
              <Picker mode='time' onChange={this.onTimeChange}>
                <View className='picker'>
                  当前选择：{this.state.timeSel}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>日期选择器</Text>
            <View>
              <Picker mode='date' onChange={this.onDateChange}>
                <View className='picker'>
                  当前选择：{this.state.dateSel}
                </View>
              </Picker>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

普通选择器

普通选择器：mode = selector

多列选择器

多列选择器：mode = multiSelector

时间选择器

时间选择器：mode = time

日期选择器

日期选择器：mode = date