HomeDocs
跳到主要内容

picker

简介​

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

属性说明​

属性类型默认值必填说明最低版本
cancel-textstringCancel否选择器的取消按钮的文本3.2.0
confirm-textstringConfirm否选择器的确认按钮的文本3.2.0
modestringselector否选择器类型；合法值：selector、multiSelector、time、date3.2.0
disabledbooleanfalse否是否禁用3.2.0
bindcanceleventhandle否取消选择或点击遮罩层收起 picker 时触发3.2.0
confirm-closebooleantrue否点击确认按钮时是收起 picker，默认收起3.2.0
confirm-text-colorstring#0081FF否确认按钮颜色3.2.0
cancel-text-colorstring#61656D否取消按钮颜色3.2.0
title-colorstring#191f2b否标题文字颜色3.2.0
selected-text-colorstring#191f2b否选中项字体颜色3.2.0

mode 合法值说明​

值说明最低版本
selector普通选择器3.2.0
multiSelector多列选择器3.2.0
time时间选择器3.3.0
date日期选择器3.3.0

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

普通选择器：mode = selector​

属性类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效3.2.0
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容3.2.0
valuenumber0表示选择了 range 中的第几个（下标从 0 开始）3.2.0
bindchangeeventhandlevalue 改变时触发 change 事件（点击确认按钮时），event.detail = {value: value}3.2.0
header-textstring选择器的标题3.2.0

多列选择器：mode = multiSelector​

属性类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效3.2.0
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容3.2.0
valuearray[]表示选择了 range 中的第几个（下标从 0 开始）3.2.0
bindcolumnchangeeventhandle某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标3.2.0
header-textstring选择器的标题3.2.0

时间选择器：mode = time​

属性类型默认值说明最低版本
valuestring表示选中的时间，格式为 hh:mm3.3.0
startstring表示有效时间范围的开始，字符串格式为 hh:mm3.3.0
endstring表示有效时间范围的结束，字符串格式为 hh:mm3.3.0
bindchangeeventhandlevalue 改变时触发 change 事件（点击确认按钮时），event.detail = {value: value}3.3.0

日期选择器：mode = date​

属性类型默认值说明最低版本
valuestring当前日期表示选中的日期，默认格式为 DD/MM/YYYY，中文和阿拉伯语格式：YYYY/MM/DD3.3.0
startstring表示有效日期范围的开始，默认字符串格式为 DD/MM/YYYY，中文和阿拉伯语格式：YYYY/MM/DD3.3.0
endstring表示有效日期范围的结束，默认字符串格式为 DD/MM/YYYY，中文和阿拉伯语格式：YYYY/MM/DD3.3.0
fieldsstringday有效值 year,month,day，表示选择器的粒度3.3.0
bindchangeeventhandlevalue 改变时触发 change 事件（点击确认按钮时），event.detail = {value: value}3.3.0

fields 有效值：​

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

示例代码​

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" :value="index" :range="array">
    <view class="picker"> 当前选择：{{array[index]}} </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker
    mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange"
    :value="multiIndex"
    :range="multiArray"
  >
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker
    mode="time"
    :value="time"
    start="09:01"
    end="21:01"
    bindchange="bindTimeChange"
  >
    <view class="picker"> 当前选择: {{time}} </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker
    mode="date"
    :value="date"
    start="2015-09-01"
    end="2017-09-01"
    bindchange="bindDateChange"
  >
    <view class="picker"> 当前选择: {{date}} </view>
  </picker>
</view>
Page({
  data: {
    array: ["美国", "中国", "巴西", "日本"],
    objectArray: [
      {
        id: 0,
        name: "美国",
      },
      {
        id: 1,
        name: "中国",
      },
      {
        id: 2,
        name: "巴西",
      },
      {
        id: 3,
        name: "日本",
      },
    ],
    index: 0,
    multiArray: [
      ["无脊柱动物", "脊柱动物"],
      ["扁性动物", "线形动物", "环节动物", "软体动物", "节肢动物"],
      ["猪肉绦虫", "吸血虫"],
    ],
    objectMultiArray: [
      [
        {
          id: 0,
          name: "无脊柱动物",
        },
        {
          id: 1,
          name: "脊柱动物",
        },
      ],
      [
        {
          id: 0,
          name: "扁性动物",
        },
        {
          id: 1,
          name: "线形动物",
        },
        {
          id: 2,
          name: "环节动物",
        },
        {
          id: 3,
          name: "软体动物",
        },
        {
          id: 3,
          name: "节肢动物",
        },
      ],
      [
        {
          id: 0,
          name: "猪肉绦虫",
        },
        {
          id: 1,
          name: "吸血虫",
        },
      ],
    ],
    multiIndex: [0, 0, 0],
    date: "2016-09-01",
    time: "12:01",
  },
  bindPickerChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      index: e.detail.value,
    });
  },
  bindMultiPickerChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      multiIndex: e.detail.value,
    });
  },
  bindMultiPickerColumnChange: function (e) {
    console.log("修改的列为", e.detail.column, "，值为", e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.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;
    }
    console.log(data.multiIndex);
    this.setData(data);
  },

  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,
    });
  },
});
Privacy agreementDeveloper agreementcontact us: developer_service.mi@transsion.com © 2024 MiniApp. All Rights Reserved.