智能小程序 Ray 开发——表单组件 Picker 和 PickerView 实操讲解

Picker

从底部弹起的滚动选择器，支持四种选择器，通过 mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，默认是 selector 普通选择器。

导入

import { Picker } from '@ray-js/ray';

属性说明

属性名	类型	默认值	必填	说明
mode	string	selector	否	选择器类型
disabled	boolean	false	否	是否禁用
confirmText	string	确定	否	确定按钮的文字
cancelText	string	取消	否	取消按钮的文字
onCancel	eventhandle		否	取消选择时触发

mode 的合法值

值	说明
selector	普通选择器
multiSelector	多列选择器
time	时间选择器
date	日期选择器

除了上述通用的属性，对于不同的 mode，picker拥有不同的属性，见下方。

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。  

普通选择器：mode = selector

属性名	类型	默认值	说明
range	array/object array	[]	mode 为 selector 或 multiSelector 时，range 有效
rangeKey	string		当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
value	array	[]	表示选择了 range 中的第几个（下标从 0 开始）
onChange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

多列选择器：mode = multiSelector

属性名	类型	默认值	说明
range	array/object array	[]	mode 为 selector 或 multiSelector 时，range 有效
rangeKey	string		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	array	[]	表示选择了 range 中的第几个（下标从 0 开始）
onChange	eventhandle		value 改变时触发 change 事件，event.detail = {value}
onColumnchange	eventhandle		列改变时触发

时间选择器：mode = time

属性名	类型	默认值	说明
value	string		表示选中的时间，格式为"hh:mm"
start	string		表示有效时间范围的开始，字符串格式为"hh:mm"
end	string		表示有效时间范围的结束，字符串格式为"hh:mm"
onChange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

时间选择器：mode = date

属性名	类型	默认值	说明
value	string	当天	表示选中的日期，格式为"YYYY-MM-DD"
start	string		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	string		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	string	day	有效值 year,month,day，表示选择器的粒度
onChange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

fields 有效值：

值	说明
year	选择器粒度为年
month	选择器粒度为月份
day	选择器粒度为天

示例代码

单选

import React from 'react';
import { Picker } from '@ray-js/components';
import { View } from '@ray-js/components';
 
export default function () {
  const [current, setCurrent] = React.useState(0);
 
  const handlePickerChange = (e) => {
    setCurrent(+e.value);
  };
 
  const range = ['美国', '中国', '巴西', '日本'];
  return (
    <Picker
      mode="selector"
      onChange={handlePickerChange}
      range={range}
      value={current}
    >
      <View style={{ flexDirection: 'row' }}>
        当前选择的是:{range[current]}
      </View>
    </Picker>
  );
}

多选

import React from 'react';
import { Picker } from '@ray-js/components';
import { View } from '@ray-js/components';
 
export default function () {
  const [current, setCurrent] = React.useState([0, 0, 0]);
 
  const handlePickerChange = (e) => {
    setCurrent(e.value);
  };
 
  const handleColumnChange = (e) => {
    console.log('picker column change', e);
  };
 
  const range = [
    ['无脊柱动物', '脊柱动物'],
    ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
    ['猪肉绦虫', '吸血虫'],
  ];
  return (
    <Picker
      onColumnChange={handleColumnChange}
      onChange={handlePickerChange}
      range={range}
      value={current}
      mode='multiSelector'
    >
      <View style={{ flexDirection: 'row' }}>
        当前选择的是:{range[0][+current[0]]}, {range[1][+current[1]]},{' '}
        {range[2][+current[2]]}
      </View>
    </Picker>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。 

PickerView

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

导入

import { PickerView } from '@ray-js/ray';

属性说明

属性名	类型	默认值	必填	说明
value	Array<number>		否	数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicatorStyle	string		否	设置选择器中间选中框的样式
maskStyle	string		否	设置蒙层的样式
onChange	eventhandle		否	滚动选择时触发 change 事件，event.detail = {value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
onPickstart	eventhandle		否	当滚动选择开始时候触发事件
onPickend	eventhandle		否	当滚动选择结束时候触发事件

示例代码

基本使用

import React from 'react'
import { PickerView, PickerViewColumn, View } from '@ray-js/components'
 
export default function () {
  const [current, setCurrent] = React.useState([0])
 
  const handlePickerChange = (e) => {
    setCurrent(e.value)
  }
 
  const range = ['巴西', '中国', '日本', '美国']
 
  return (
    <PickerView onChange={handlePickerChange} value={current}>
      <PickerViewColumn>
        {(range as string[]).map((item: string, index: number) => (
          <View
            key={index}
            style={{
              textAlign: 'center',
              lineHeight: '36px',
            }}
          >
            {item}
          </View>
        ))}
      </PickerViewColumn>
    </PickerView>
  )
}
 

PickerViewColumn

滚动选择器子项。需要配合 <PickerView /> 使用, 仅可放置于 PickerView 中，其高度会自动设置成与 PickerView 的选中框的高度一致。

导入

import { PickerViewColumn } from '@ray-js/ray';

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。