Picker

从底部弹起的滚动选择器。扫码体验：

img.jpg

属性名类型默认值描述最低版本
rangeString[] / Object[][]String[] 时表示可选择的字符串列表 Object[] 时需指定 range-key 表示可选择的字段
range-keyString当 range 是一个 Object[] 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber表示选择了 range 中的第几个（下标从 0 开始）。
onChangeEventHandlevalue 改变时触发，event.detail = {value: value}
disabledBooleanfalse是否禁用

Screenshot

image

示例代码

  1. <view class="section">
  2.   <view class="section-title">地区选择器</view>
  3.   <picker onChange="bindPickerChange" value="{{index}}" range="{{array}}">
  4.     <view class="picker">
  5.       当前选择：{{array[index]}}
  6.     </view>
  7.   </picker>
  9.   <picker onChange="bindObjPickerChange" value="{{arrIndex}}" range="{{objectArray}}" range-key="name">
  10.     <view class="row">
  11.       <view class="row-title">ObjectArray</view>
  12.       <view class="row-extra">当前选择：{{objectArray[arrIndex].name}}</view>
  13.       <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
  14.     </view>
  15.   </picker>
  16. </view>
  1. Page({
  2.   data: {
  3.     array: ['中国', '美国', '巴西', '日本'],
  4.     objectArray: [
  5.       {
  6.         id: 0,
  7.         name: '美国',
  8.       },
  9.       {
  10.         id: 1,
  11.         name: '中国',
  12.       },
  13.       {
  14.         id: 2,
  15.         name: '巴西',
  16.       },
  17.       {
  18.         id: 3,
  19.         name: '日本',
  20.       },
  21.     ],
  22.     arrIndex: 0,
  23.     index: 0
  24.   },
  25.   bindPickerChange(e) {
  26.     console.log('picker发送选择改变，携带值为', e.detail.value);
  27.     this.setData({
  28.       index: e.detail.value,
  29.     });
  30.   },
  31.   bindObjPickerChange(e) {
  32.     console.log('picker发送选择改变，携带值为', e.detail.value);
  33.     this.setData({
  34.       arrIndex: e.detail.value,
  35.     });
  36.   },
  37. });

原文: https://docs.alipay.com/mini/component/picker