picker

从底部弹起的滚动选择器。

效果展示

示例代码

WXML

<view class="page">
    <view class="section">
        <view class="section__title">普通选择器：默认</view>
            <picker bindchange="bindPickerChange" bindcancel="bindcancel" value="{{index}}" range="{{array}}" disabled="{{disabled}}" >
                <view class="picker">当前选择：{{array[index]}}</view>
            </picker>
        </view>
        <view class="section__title">普通选择器：selector</view>
            <picker mode="selector" bindchange="bindPickerChange1" value="{{objindex}}"
             range="{{objectArray}}" range-key="name" disabled="{{disabled}}" >
                <view class="picker">当前选择：{{objectArray[objindex].name}}</view>
            </picker>
        </view>
    <view class="section">
        <view class="section__title">时间选择器</view>
        <picker mode="time" value="{{time}}"  bindchange="bindTimeChange" disabled="{{disabled}}">
            <view class="picker">当前选择: {{time}}</view>
        </picker>
    </view>
    <view class="section">
        <view class="section__title">日期选择器</view>
        <picker mode="date" value="{{date}}"  bindchange="bindDateChange" disabled="{{disabled}}">
            <view class="picker">当前选择: {{date}}</view>
        </picker>
    </view>
    <button bindtap="toggle">切换禁用disabled:{{disabled}}</button>
</view>

JS

Page({
  data: {
    disabled: false,
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    objindex: 0,
    date: '2016-09-01',
    time: '12:01'
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindPickerChange1: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      objindex: e.detail.value
    })
  },
  bindDateChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindcancel(){
    console.log("cancel")
  },
  toggle() {
    this.setData({
      disabled: !this.data.disabled
    })
  }
})

WXSS

.picker{
    padding: 13px;
    background-color: #FFFFFF;
}

API

属性	类型	默认值	必填	说明
mode	string	selector	否	选择器类型
disabled	boolean	false	否	是否禁用
bindcancel	eventhandle		否	取消选择时触发

mode 的合法值

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

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

普通选择器：mode = selector

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

时间选择器：mode = time

属性名	类型	默认值	说明
value	string	当前时间	表示选中的时间，格式为”hh:mm”
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

日期选择器：mode = date

属性名	类型	默认值	说明
value	string	当前日期	表示选中的日期，格式为”YYYY-MM-DD”
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

• 部分安卓手机日期滑动时数据会偏移中间显示。

多平台支持

属性	平台支持
mode	支付宝
disabled	支付宝

注释：

支付宝mode为日期时，可通过my.datePicker接口处理