picker

<view class="page-body">
  <view class="page-section">
  <view class="contentTitle">普通选择器</view>
  <view class="contentBody">
    <view class="contentKey">当前选择</view>
    <view class="contentVal">
    <picker
      bindchange="bindPickerChange"
      value="{{index}}"
      range="{{array}}">
      <view>{{array[index]}}</view>
    </picker>
    </view>
  </view>
  <view class="contentTitle">时间选择器</view>
  <view class="contentBody">
    <view class="contentKey">当前选择</view>
    <view class="contentVal">
    <picker
      mode="time"
      value="{{time}}"
      start="09:01"
      end="21:01"
      bindchange="bindTimeChange">
      <view>{{time}}</view>
    </picker>
    </view>
  </view>
  <view class="page-body">
    <view class="page-section">
    <view class="page-section-spacing">
      <picker mode="multiSelector"
        value="{{multiIndex}}"
        range="{{multiArray}}"
        bindchange="bindPickerChange"
        bindcolumnchange="bindColumnChange">
      <view class="picker">多列选择器</view>
      </picker>
    </view>
    </view>
  </view>
  </view>
</view>

Page({
  data: {
    array: ['皮卡丘', '小火龙', '杰尼龟', '火恐龙'],
    index: 0,
    time: '12:01',
    multiIndex: [0, 0],
    // 多列选择器：
    multiArray: [['音频', '视频'], ['酷狗', '音乐']], // 二维数组，长度是多少是几列
  },
  bindPickerChange(event) {
    // event.detail内容举例为：{"value":""}
    console.info('picker组件的选择发生改变，携带值为', event.detail);
  },
  bindTimeChange(event) {
    // event.detail.value内容举例为：**:**
    console.info('picker组件mode为time时，选择发生改变，携带值为：', event.detail.value);
    this.setData({
      time: event.detail.value
    });
  },
  bindColumnChange(event) {
    // event.detail内容举例为：{"value":[],"column":""}
    console.info('picker组件列改变时触发，携带值为：', event.detail);
  }
});