picker 底部弹起的滚动选择器

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

# 属性说明

属性 类型 默认值 必填 说明
mode String selector 选择器类型。
disabled Boolean false 是否禁用。
bindcancel EventHandle 取消选择或点击遮罩层收起 picker 时触发。

除去上述通用属性外,针对不同的 mode,picker 组件还提供有其他不同的属性,详细介绍见下。

# mode 的有效值

说明
selector 普通选择器
time 时间选择器
date 日期选择器
multiSelector 多列选择器
region 省市区选择器

# 普通选择器:mode = selector

属性名 类型 默认值 说明
range Array | Array.<object> [] mode 为 selector 或 multiSelector 时,range 有效。
range-key String 当 range 是一个 Array.<object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。
value Number 0 value 的值表示选择了 range 中的第几个(下标从 0 开始)。
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}。
title String 选择器标题(仅安卓有效)默认值为 "设置";基础库 3.110.3 及以上废弃

# 时间选择器:mode = time

属性名 类型 默认值 说明
value String 表示选中的时间,格式为 "hh:mm"。
start String 表示有效时间范围的开始,字符串格式为 "hh:mm"。
end String 表示有效时间范围的结束,字符串格式为 "hh:mm"。
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}。

# 日期选择器:mode = date

属性名 类型 默认值 说明
value String 当前日期 表示选中的日期,格式为 "YYYY-MM-DD"。
start String 表示有效日期范围的开始,字符串格式为 "YYYY-MM-DD"。
end String 表示有效日期范围的结束,字符串格式为 "YYYY-MM-DD"。
fields String day 有效值 year、 month、 day,表示选择器的粒度。
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}。

# fields 有效值

说明
year 选择器粒度为年。
month 选择器粒度为月。
day 选择器粒度为天。

# 多列选择器:mode = multiSelector

属性名 类型 默认值 说明
range 二维 Array | Array.<object> [] mode 为 selector 或 multiSelector 时, range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]。
range-key String 当 range 是一个二维 Array.<object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。
value Array [] value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)。
bindcolumnchange EventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从 0 开始),value 的值表示变更值的下标。
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}。
title String 选择器标题(仅安卓有效)默认值为 "设置;基础库 3.110.3 及以上废弃

# 省市区选择器:mode = region

属性名 类型 默认值 说明
value Array [] 表示选中的省市区,默认选中每一列的第一个值。
custom-item String 可为每一列的顶部添加一个自定义的项。
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value}, 暂不支持统计用区划代码(code)、邮政编码(postcode)。
title String 选择器标题(仅安卓有效)默认值为 "设置";基础库 3.110.3 及以上废弃

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 1:普通选择器

    <view class="wrap">
        <view class="card-area">
            <view class="top-description border-bottom">
                <view>普通选择器</view>
                <view>mode="selector"</view>
            </view>
            <view class="section" hover-class="section-active">
                <picker mode="selector" 
                        value="{{arrIndex}}" 
                        range="{{selector}}"
                        range-key="name"
                        bind:change="selectorChange">
                    <view class="picker">
                        <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                    </view>
                </picker>
            </view>
        </view>
    </view>
    
    Page({
        data: {
            selector: [{
                id: '1',
                name:'选项一'
            }, {
                id: '2',
                name:'选项二'
            }, {
                id: '3',
                name:'选项三'
            }],
            rangeKey: ['选项一'],
            arrIndex: 0
        },
        selectorChange(e) {
            console.log('picker-selector changed,值为', e.detail.value);
            this.setData('arrIndex', e.detail.value);
        }
    });
    

    # 代码示例 2:时间选择器

      <view class="wrap">
          <view class="card-area">
              <view class="top-description border-bottom">
                  <view>时间选择器</view>
                  <view>mode="time"</view>
              </view>
              <view class="section" hover-class="section-active">
                  <picker mode="time" 
                          value="{{time}}" 
                          start="1:01" 
                          end="22:59"
                          bind:change="timeChange"
                          disabled="false">
                      <view class="picker">
                          <text class="chooseItem">请选择时间:</text>{{time}}
                      </view>
                  </picker>
              </view>
          </view>
      </view>
      
      Page({
          data: {
              time: '12:12'
          },
          timeChange(e) {
              console.log('picker-time changed,值为', e.detail.value);
              this.setData(
                  'time', e.detail.value
              );
          }
      });
      

      # 代码示例 3 :日期选择器

        <view class="wrap">
            <view class="card-area">
                <view class="top-description border-bottom">
                    <view>日期选择器</view>
                    <view>mode="date"</view>
                </view>
                <view class="section date-section" hover-class="section-active">
                    <picker mode="date" 
                            value="{{dateDay}}"
                            bind:change="dateChangeDay"
                            fields="day">
                        <view>
                            <text class="chooseItem">请选择日期:</text>{{dateDay}}
                        </view>
                    </picker>
                </view>
            </view>
        </view>
        
        Page({
            data: {
                dateDay: '2018-01-05'
            },
            dateChangeDay(e) {
                console.log('picker-date changed,值为', e.detail.value);
                this.setData(
                    'dateDay', e.detail.value
                );
            }
        });
        

        # 代码示例 4 :多列选择器

          <view class="wrap">
              <view class="card-area">
                  <view class="top-description border-bottom">
                      <view>多列选择器</view>
                      <view>mode="multiSelector"</view>
                  </view>
                  <view class="section date-section" hover-class="section-active">
                      <picker mode="multiSelector" 
                              bindchange="bindMultiPickerChange"           
                              bindcolumnchange="bindMultiPickerColumnChange"                     
                              value="{{multiIndex}}" 
                              range="{{multiArray}}" 
                              title="多列选择器">
                          <view class="picker">
                              <text class="chooseItem">请选择:</text>{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}
                          </view>
                      </picker>
                  </view>
              </view>
          </view>
          
          Page({
              data: {
                  multiIndex: [0, 0, 0],
                  multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]
              },
              bindMultiPickerChange: function (e) {
                  console.log('picker-multiSelector changed,值为', e.detail.value)
                  this.setData(
                      'multiIndex', e.detail.value
                  );
              },
              bindMultiPickerColumnChange: function (e) {
                  console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
                  var data = {
                      multiArray: this.getData('multiArray'),
                      multiIndex: this.getData('multiIndex')
                  };
                  data.multiIndex[e.detail.column] = e.detail.value;
                  switch (e.detail.column) {
                      case 0:
                          switch (data.multiIndex[0]) {
                              case 0:
                                  data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                                  data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                  break;
                              case 1:
                                  data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                                  data.multiArray[2] = ['鲫鱼', '带鱼'];
                                  break;
                          }
                          data.multiIndex[1] = 0;
                          data.multiIndex[2] = 0;
                          break;
                      case 1:
                          switch (data.multiIndex[0]) {
                              case 0:
                                  switch (data.multiIndex[1]) {
                                      case 0:
                                          data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                          break;
                                      case 1:
                                          data.multiArray[2] = ['蛔虫'];
                                          break;
                                      case 2:
                                          data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                          break;
                                      case 3:
                                          data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                          break;
                                      case 4:
                                          data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                          break;
                                  }
                                  break;
                              case 1:
                                  switch (data.multiIndex[1]) {
                                      case 0:
                                          data.multiArray[2] = ['鲫鱼', '带鱼'];
                                          break;
                                      case 1:
                                          data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                          break;
                                      case 2:
                                          data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                          break;
                                  }
                                  break;
                          }
                          data.multiIndex[2] = 0;
                          break;
                  }
                  this.setData('multiArray', data.multiArray);
                  this.setData('multiIndex', data.multiIndex);
              }
          });
          

          # 代码示例 5 :省市区选择器

            <view class="wrap">
                <view class="card-area">
                    <view class="top-description border-bottom">
                        <view>省市区选择器</view>
                        <view>mode="region"</view>
                    </view>
                    <view class="section" hover-class="section-active">
                        <picker mode="region"                 
                                bind:change="regionChange" 
                                custom-item="{{customItem}}" 
                                title="地区选择器">
                            <view class="picker">
                                <text class="chooseItem">请选择地区:</text>{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            
            Page({
                data: {
                    regionData: ['全部', '全部', '全部']
                },
                regionChange(e) {
                    this.setData(
                        'regionData', e.detail.value
                    );
                    console.log('picker-time changed,值为', e.detail.value);
                }
            });
            

            # 代码示例 6:设置禁用

              <view class="wrap">
                  <view class="card-area">
                      <view class="top-description border-bottom">
                          <view>设置禁用</view>
                          <view>disabled</view>
                      </view>
                      <view class="section" hover-class="section-active">
                          <picker mode="selector" 
                                  class="disabled" 
                                  value="{{arrIndex}}" 
                                  range="{{selector}}"
                                  range-key="name"
                                  disabled>
                              <view class="picker">
                                  <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                              </view>
                          </picker>
                      </view>
                  </view>
              </view>
              

              # 代码示例 7:取消选择时触发提示

                <view class="wrap">
                    <view class="card-area">
                        <view class="top-description border-bottom">
                            <view>取消选择时触发提示</view>
                            <view>bindcancel</view>
                        </view>
                        <view class="section" hover-class="section-active">
                            <picker mode="selector" 
                                    value="{{arrIndex}}" 
                                    range="{{selector}}" 
                                    range-key="name"
                                    bind:change="selectorChange"
                                    bind:cancel="cancel">
                                <view class="picker">
                                    <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
                
                Page({
                    data: {
                        arrIndex: 0,
                        selector: ['选项一', '选项二', '选项三']
                    },
                    selectorChange(e) {
                        console.log('picker-selector changed,值为', e.detail.value);
                        this.setData('arrIndex', e.detail.value);
                    },
                    cancel() {
                        swan.showToast({
                            title: '用户取消选择',
                            icon: 'none'
                        });
                    }
                });
                

                # Bug & Tip

                • Tip:基础库版本 11.15 以下:picker 组件在 iOS 系统中从底部弹出,在安卓系统中从中间弹出。

                • Tip:基础库版本 11.15 及以上:picker 组件双端都是从底部弹出。