picker | uni-app-x

# picker

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

# 兼容性

Web	微信小程序	Android	iOS
4.0	4.41	x	x

App平台可改用picker-view。

主流的uni-app x三方ui库中，基本都有封装好的弹出组件。包括uni ui的uni-data-picker也支持uni-app x，可以随意装载城市或其他数据。

# 属性

名称

类型

默认值

兼容性

描述

disabled

boolean

是否禁用

mode

string

选择器类型

合法值

兼容性

描述

selector

普通选择器

multiSelector

多列选择器

time

时间选择器

date

日期选择器

region

省市选择器

range

array

mode为 selector 或 multiSelector 时，range 有效

range-key

string

当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value

string

mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为"hh:mm"；mode为date时：表示选中的日期，格式为"YYYY-MM-DD"；mode为region时：
表示选中的省市区，默认选中每一列的第一个值。

start

string

mode为time：表示有效时间范围的开始，字符串格式为"hh:mm"；mode为date：表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"

end

string

mode为time：表示有效时间范围的结束，字符串格式为"hh:mm"；mode为date：表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"

fields

string

有效值 year,month,day，表示选择器的粒度

合法值

兼容性

描述

year

选择器粒度为年

month

选择器粒度为月份

day

选择器粒度为天

custom-item

string

可为每一列的顶部添加一个自定义的项

@change

(event: UniEvent) => void

value 改变时触发 change 事件，event.detail = {value: value}

@columnchange

(event: UniEvent) => void

某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标

@cancel

(event: UniEvent) => void

取消选择时触发

header-text

string

level

string

mode="region" 时有效，选择器层级

合法值

兼容性

描述

province

city

region

sub-district

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-title uni-common-pl">普通选择器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker class="picker" @change="bindPickerChange" :value="index" :range="array" range-key="name">
            <view class="uni-input pickerValue">{{array[index].name}}</view>
          </picker>
        </view>
      </view>
    </view>

    <view class="uni-title uni-common-pl">多列选择器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker class="pickerMulti" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
            :value="multiIndex" :range="multiArray">
            <view class="uni-input pickerMultiValue">
              {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
            </view>
          </picker>
        </view>
      </view>
    </view>

    <view class="uni-title uni-common-pl">时间选择器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker class="pickerTime" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
            <view class="uni-input">{{time}}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="uni-picker-tips">
      注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
    </view>

    <view class="uni-title uni-common-pl">日期选择器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker class="pickerDate" mode="date" :value="date" :start="startDate" :end="endDate"
            @change="bindDateChange">
            <view class="uni-input">{{date}}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="uni-picker-tips">
      注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
    </view>
  </view>
</template>


<style>
  .uni-picker-tips {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
    padding: 0 15px;
  }
</style>