嵌入页面的滚动选择器

属性

属性名 类型 说明
value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicatorStyle String 设置选择器中间选中框的样式
indicatorClass String 设置选择器中间选中框的类名
maskStyle String 设置蒙层的样式
maskClass String 设置蒙层的类名
onChange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value 为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

各端支持度

属性 微信小程序 H5 ReactNative 百度小程序 支付宝小程序 字节跳动小程序
value x
indicatorStyle x
indicatorClass x
maskStyle x
maskClass x
onChange x

PickerViewColumn

仅可放置于 PickerView 中,其孩子节点的高度会自动设置成与 PickerView 的选中框的高度一致

示例:

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, PickerView, PickerViewColumn } from '@tarojs/components'
  3. export default class Picks extends Component {
  4. constructor () {
  5. super(...arguments)
  6. const date = new Date()
  7. const years = []
  8. const months = []
  9. const days = []
  10. for (let i = 1990; i <= date.getFullYear(); i++) {
  11. years.push(i)
  12. }
  13. for (let i = 1; i <= 12; i++) {
  14. months.push(i)
  15. }
  16. for (let i = 1; i <= 31; i++) {
  17. days.push(i)
  18. }
  19. this.state = {
  20. years: years,
  21. year: date.getFullYear(),
  22. months: months,
  23. month: 2,
  24. days: days,
  25. day: 2,
  26. value: [9999, 1, 1]
  27. }
  28. }
  29. onChange = e => {
  30. const val = e.detail.value
  31. this.setState({
  32. year: this.state.years[val[0]],
  33. month: this.state.months[val[1]],
  34. day: this.state.days[val[2]],
  35. value: val
  36. })
  37. }
  38. render() {
  39. return (
  40. <View>
  41. <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
  42. <PickerView indicatorStyle='height: 50px;' style='width: 100%; height: 300px;' value={this.state.value} onChange={this.onChange}>
  43. <PickerViewColumn>
  44. {this.state.years.map(item => {
  45. return (
  46. <View>{item}年</View>
  47. );
  48. })}
  49. </PickerViewColumn>
  50. <PickerViewColumn>
  51. {this.state.months.map(item => {
  52. return (
  53. <View>{item}月</View>
  54. )
  55. })}
  56. </PickerViewColumn>
  57. <PickerViewColumn>
  58. {this.state.days.map(item => {
  59. return (
  60. <View>{item}日</View>
  61. )
  62. })}
  63. </PickerViewColumn>
  64. </PickerView>
  65. </View>
  66. )
  67. }
  68. }