picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

属性

支持通用属性

属性名 类型 默认值 说明 平台支持
mode String selector 选择器类型 u?,w,m?

普通选择器：mode = selector

属性名 类型 默认值 说明 平台支持
range Array / Object Array [] mode为 selector 或 multiSelector 时，range 有效 all
range-key String 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 u?,w,a
value Number 0 value 的值表示选择了 range 中的第几个（下标从 0 开始） all
disabled Boolean false 是否禁用 u?,w,a

多列选择器：mode = multiSelector

属性名 类型 默认值 说明 平台支持
range 二维Array / 二维Object Array [] mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]] u?,w
range-key String 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 u?,w
value Array [] value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） u?,w
disabled Boolean false 是否禁用 u?,w

时间选择器：mode = time

属性名 类型 默认值 说明 平台支持
value String 表示选中的时间，格式为"hh:mm" u?,w,m
start String 表示有效时间范围的开始，字符串格式为"hh:mm" u?,w,m
end String 表示有效时间范围的结束，字符串格式为"hh:mm" u?,w,m
disabled Boolean false 是否禁用 u?,w

日期选择器：mode = date

属性名 类型 默认值 说明 平台支持
value String 0 表示选中的日期，格式为"YYYY-MM-DD" u?,w,m
start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" u?,w,m
end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" u?,w,m
fields String day 有效值 year,month,day，表示选择器的粒度 u?,w
disabled Boolean false 是否禁用 u?,w

fields 有效值：

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

省市区选择器：mode = region

属性名 类型 默认值 说明 平台支持
value Array [] 表示选中的省市区，默认选中每一列的第一个值 u?,w
custom-item String 可为每一列的顶部添加一个自定义的项 u?,w
disabled Boolean false 是否禁用 u?,w

事件

支持通用事件

事件名 描述 平台支持
onchange 选中项发生变化event.detail={value:value} all
oncolumnchange 某一列发生变化event.detail={column:column,value:value} u?,w

示例

<view class="section">
  <view class="section-title">地区选择器</view>
  <picker onchange="bindPickerChange" value="" range="">
    <view class="picker">
      当前选择：
    </view>
  </picker>

<picker onchange="bindObjPickerChange" value="" range="" range-key="name">
    <view class="row">
      <view class="row-title">ObjectArray</view>
      <view class="row-extra">当前选择：</view>
      <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
    </view>
  </picker>
</view>

Page({
  data: {
    array: ['中国', '美国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国',
      },
      {
        id: 1,
        name: '中国',
      },
      {
        id: 2,
        name: '巴西',
      },
      {
        id: 3,
        name: '日本',
      },
    ],
    arrIndex: 0,
    index: 0
  },
  bindPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindObjPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      arrIndex: e.detail.value,
    });
  },
});

results matching ""

    No results matching ""