PickerView - 《Taro 文档帮助手册教程》

sidebar_label: PickerView
Type
Examples
PickerViewProps
Property Support
- onChangeEventDetail
API Support

title: PickerView

sidebar_label: PickerView

The scroll picker nested into a page. Only the picker-view-column component can be placed in it. Other nodes are not displayed.

Reference

Type

ComponentType<PickerViewProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx
export default class Picks extends Component {

  constructor () {
    super(...arguments)
    const date = new Date()
    const years = []
    const months = []
    const days = []
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    this.state = {
      years: years,
      year: date.getFullYear(),
      months: months,
      month: 2,
      days: days,
      day: 2,
      value: [9999, 1, 1]
    }
  }

  onChange = e => {
    const val = e.detail.value
    this.setState({
      year: this.state.years[val[0]],
      month: this.state.months[val[1]],
      day: this.state.days[val[2]],
      value: val
    })
  }

  render() {
    return (
      <View>
        <View>{this.state.year}-{this.state.month}-{this.state.day}</View>
        <PickerView indicatorStyle='height: 50px;' style='width: 100%; height: 300px;' value={this.state.value} onChange={this.onChange}>
          <PickerViewColumn>
            {this.state.years.map(item => {
              return (
                <View>{item}</View>
              );
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.months.map(item => {
              return (
                <View>{item}</View>
              )
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.days.map(item => {
              return (
                <View>{item}</View>
              )
            })}
          </PickerViewColumn>
        </PickerView>
      </View>
    )
  }
}

html
<template>
  <view class="taro-example">
  <view>{{year}}-{{month}}-{{day}}</view>
  <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" @change="onChange">
    <picker-view-column>
      <view v-for="(item, index) in years" :key="index">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in months" :key="index">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in days" :key="index">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>
</template>

<script>
  export default {
    name: "Index",
    data() {
      const date = new Date()
      const years = []
      const months = []
      const days = []
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      return {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        value: [3, 1, 1]
      }
    },

    methods: {
      onChange: function(e) {
        const val = e.detail.value
        console.log(val)
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
      }
    }
  }
</script>

PickerViewProps

Property	Type	Required	Description
value	`number[]`	No	The number in the array indicates the sequence number (starting from 0 in the subscript) of the item selected in the picker-view-column of picker-view. When the number is greater than the maximum length of the picker-view-column, the last item is selected.
indicatorStyle	`string`	No	Specifies the style of the checkbox in the picker.
indicatorClass	`string`	No	Specifies the name of the checkbox in the picker.
maskStyle	`string`	No	Specifies the style of the mask.
maskClass	`string`	No	Specifies the name of the mask.
onChange	`BaseEventOrigFunction<onChangeEventDetail>`	No	A change event triggered when the list is scrolled for selection. event.detail = {`{value}`}. The value is an array, indicating the sequence number (starting from 0 in the subscript) of the item selected in the picker-view-column of picker-view.
onPickStart	`BaseEventOrigFunction<any>`	No	An event triggered when scrolling starts.
onPickEnd	`BaseEventOrigFunction<any>`	No	An event triggered when scrolling ends.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App
PickerViewProps.value	✔️	✔️	✔️	✔️
PickerViewProps.indicatorStyle	✔️	✔️	✔️	✔️
PickerViewProps.indicatorClass	✔️	✔️	✔️
PickerViewProps.maskStyle	✔️	✔️	✔️	✔️
PickerViewProps.maskClass	✔️	✔️	✔️
PickerViewProps.onChange	✔️	✔️	✔️	✔️
PickerViewProps.onPickStart	✔️
PickerViewProps.onPickEnd	✔️

onChangeEventDetail

Param	Type
value	`number[]`

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
PickerView	✔️	✔️	✔️	✔️		✔️