Skip to main content
Version: 3.x

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

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>
)
}
}

PickerViewProps

PropertyTypeRequiredDescription
valuenumber[]NoThe 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.
indicatorStylestringNoSpecifies the style of the checkbox in the picker.
indicatorClassstringNoSpecifies the name of the checkbox in the picker.
maskStylestringNoSpecifies the style of the mask.
maskClassstringNoSpecifies the name of the mask.
onChangeBaseEventOrigFunction<onChangeEventDetail>NoA 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.
onPickStartBaseEventOrigFunction<any>NoAn event triggered when scrolling starts.
onPickEndBaseEventOrigFunction<any>NoAn event triggered when scrolling ends.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
PickerViewProps.value✔️✔️✔️✔️
PickerViewProps.indicatorStyle✔️✔️✔️✔️
PickerViewProps.indicatorClass✔️✔️✔️
PickerViewProps.maskStyle✔️✔️✔️✔️
PickerViewProps.maskClass✔️✔️✔️
PickerViewProps.onChange✔️✔️✔️✔️
PickerViewProps.onPickStart✔️
PickerViewProps.onPickEnd✔️

onChangeEventDetail

ParamType
valuenumber[]

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
PickerView✔️✔️✔️✔️✔️