PickerView

版本要求:
@ray-js/ray≥0.5.10

描述

嵌入页面的滚动选择器。其中只可放置 PickerViewColumn 组件，其它节点不会显示。

属性

属性类型必填默认值说明
valuenumber[]否-数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项
indicatorStylestring | any否-设置选择器中间选中框的样式（对象或 CSS 声明字符串）
maskStylestring | any否-设置蒙层的样式（对象或 CSS 声明字符串）
否-滚动选择时触发
否-当滚动选择开始时触发
否-当滚动选择结束时触发

示例代码

基础用法

import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0]);
  const range = ['巴西', '中国', '日本', '美国'];

  return (
    <View style={{ padding: '20px' }}>
      <Text>当前选择: {range[current[0]]}</Text>
      <PickerView
        onChange={(e) => {
          console.log('选择改变:', e.detail.value);
          setCurrent(e.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
      >
        <PickerViewColumn>
          {range.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>
              {item}
            </View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}

多列选择

import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0, 0, 0]);

  const years = ['2020', '2021', '2022', '2023', '2024'];
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, '0'));

  return (
    <View style={{ padding: '20px' }}>
      <Text>
        当前日期: {years[current[0]]}-{months[current[1]]}-{days[current[2]]}
      </Text>
      <PickerView
        onChange={(e) => {
          console.log('日期改变:', e.detail.value);
          setCurrent(e.detail.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
        onPickstart={() => console.log('开始滚动')}
        onPickend={() => console.log('结束滚动')}
      >
        <PickerViewColumn>
          {years.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {months.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {days.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}