picker

功能描述

选择器。

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

组件属性

属性名	类型	默认值	说明
disabled	Boolean	false	是否禁用
bindcancel	EventHandle	-	取消选择或点遮罩层收起 picker 时触发
bindchange	EventHandle	-	value 改变时触发 change 事件，event.detail = {value: value}

普通选择器：mode = selector

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode 为 selector 或 multiSelector 时，range 有效
range-key	String	-	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

多列选择器：mode = multiSelector

时间选择器：mode = time

属性名	类型	默认值	说明
value	String	-	表示当前选中的时间，格式为 "hh:mm"
start	String	-	表示有效时间范围的开始，字符串格式为 "hh:mm"
end	String	-	表示有效时间范围的结束，字符串格式为 "hh:mm"

日期选择器：mode = date

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为 "YYYY-MM-DD"
start	String	-	表示有效日期范围的开始，字符串格式为 "YYYY-MM-DD"
end	String	-	表示有效日期范围的结束，字符串格式为 "YYYY-MM-DD"
fields	String	day	有效值 year , month , day，表示选择器的粒度

省市区选择器：mode = region

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值

示例代码

<view class="page-section">
    <view class="cells__title">地区选择器</view>
    <view class="cells cells_after-title">
        <view class="cell cell_input">
          <view class="cell__hd">
            <view class="label">当前选择</view>
          </view>
          <view class="cell__bd">
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
              <view class="input">{{array[index]}}</view>
            </picker>
          </view>
        </view>
    </view>

    <view class="cells__title">时间选择器</view>
    <view class="cells cells_after-title">
        <view class="cell cell_input">
          <view class="cell__hd">
            <view class="label">当前选择</view>
          </view>
          <view class="cell__bd">
            <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
              <view class="input">{{time}}</view>
            </picker>
          </view>
        </view>
    </view>

    <view class="cells__title">日期选择器</view>
    <view class="cells cells_after-title">
        <view class="cell cell_input">
          <view class="cell__hd">
            <view class="label">当前选择</view>
          </view>
          <view class="cell__bd">
            <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
              <view class="input">{{date}}</view>
            </picker>
          </view>
        </view>
    </view>
</view>

预览