×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：picker底部弹起的滚动选择器

picker 底部弹起的滚动选择器

解释：从底部弹起的滚动选择器。现支持五种选择器，通过 mode 来区分，分别是时间选择器、日期选择器、普通选择器、多列选择器以及省市区选择器，默认是普通选择器。如需级联选择功能，可使用 Smart UI 组件，详见 cascade 级联。

属性说明

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

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

mode 的有效值

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

普通选择器：mode = selector

属性名 类型 默认值 说明
range Array/Array. [] mode 为 selector 或 multiSelector 时，range 有效
range-key String 当 range 是一个 Array. 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number 0 value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchange EventHandle value 改变时触发 change 事件， event.detail = {value: value}
title String 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示

时间选择器：mode = time

属性名 类型 默认值 说明
value String 表示选中的时间，格式为“hh:mm”
start String 表示有效时间范围的开始，字符串格式为“hh:mm”
end String 表示有效时间范围的结束，字符串格式为“hh:mm”
bindchange EventHandle value 改变时触发 change 事件， event.detail = {value: value}
title String 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示

日期选择器：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}
title String 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示

fields 有效值

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

多列选择器：mode = multiSelector

属性名 类型 默认值 说明
range Array/Array. [] mode 为 selector 或 multiSelector 时， range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,”b”], [“c”,”d”]]。
range-key String 当 range 是一个二维 Array. 时，通过 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 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示

省市区选择器：mode = region

属性名 类型 默认值 说明
value Array [] 表示选中的省市区，默认选中每一列的第一个值
custom-item String 可为每一列的顶部添加一个自定义的项
bindchange EventHandle value 改变时触发 change 事件，event.detail = {value}，暂不支持统计用区划代码（code）、邮政编码（postcode）
title String 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：普通选择器

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  普通选择器
    5.   
  
  
  5.  mode="selector"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  value="{{arrIndex}}"
    10.   
  
  
  10.  range="{{selector}}"
    11.   
  
  
  11.  range-key="name"
    12.   
  
  
  12.  title="选择器标题"
    13.   
  
  
  13.  bind:change="selectorChange">
    14.   
  
  
  14.  
    15.   
  
  
  15.  请选择:{{selector[arrIndex].name}}
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  selector: [{
    4.   
  
  
  4.  id: '1',
    5.   
  
  
  5.  name:'选项一'
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  id: '2',
    8.   
  
  
  8.  name:'选项二'
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  id: '3',
    11.   
  
  
  11.  name:'选项三'
    12.   
  
  
  12.  }],
    13.   
  
  
  13.  rangeKey: ['选项一'],
    14.   
  
  
  14.  arrIndex: 0
    15.   
  
  
  15.  },
    16.   
  
  
  16.  selectorChange(e) {
    17.   
  
  
  17.  console.log('picker-selector changed，值为', e.detail.value);
    18.   
  
  
  18.  this.setData('arrIndex', e.detail.value);
    19.   
  
  
  19.  }
    20.   
  
  
  20. });
    21.

代码示例 2：时间选择器

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  时间选择器
    5.   
  
  
  5.  mode="time"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  value="{{time}}"
    10.   
  
  
  10.  start="1:01"
    11.   
  
  
  11.  end="22:59"
    12.   
  
  
  12.  bind:change="timeChange"
    13.   
  
  
  13.  disabled="false">
    14.   
  
  
  14.  
    15.   
  
  
  15.  请选择时间:{{time}}
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  time: '12:12'
    4.   
  
  
  4.  },
    5.   
  
  
  5.  timeChange(e) {
    6.   
  
  
  6.  console.log('picker-time changed，值为', e.detail.value);
    7.   
  
  
  7.  this.setData(
    8.   
  
  
  8.  'time', e.detail.value
    9.   
  
  
  9.  );
    10.   
  
  
  10.  }
    11.   
  
  
  11. });
    12.

代码示例 3：日期选择器

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  日期选择器
    5.   
  
  
  5.  mode="date"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  value="{{dateDay}}"
    10.   
  
  
  10.  bind:change="dateChangeDay"
    11.   
  
  
  11.  fields="day">
    12.   
  
  
  12.  
    13.   
  
  
  13.  请选择日期:{{dateDay}}
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  dateDay: '2018-01-05'
    4.   
  
  
  4.  },
    5.   
  
  
  5.  dateChangeDay(e) {
    6.   
  
  
  6.  console.log('picker-date changed，值为', e.detail.value);
    7.   
  
  
  7.  this.setData(
    8.   
  
  
  8.  'dateDay', e.detail.value
    9.   
  
  
  9.  );
    10.   
  
  
  10.  }
    11.   
  
  
  11. });
    12.

代码示例 4：多列选择器

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  多列选择器
    5.   
  
  
  5.  mode="multiSelector"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  bindchange="bindMultiPickerChange"
    10.   
  
  
  10.  bindcolumnchange="bindMultiPickerColumnChange"
    11.   
  
  
  11.  value="{{multiIndex}}"
    12.   
  
  
  12.  range="{{multiArray}}"
    13.   
  
  
  13.  title="多列选择器">
    14.   
  
  
  14.  
    15.   
  
  
  15.  请选择:{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  multiIndex: [0, 0, 0],
    4.   
  
  
  4.  multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]
    5.   
  
  
  5.  },
    6.   
  
  
  6.  bindMultiPickerChange: function (e) {
    7.   
  
  
  7.  console.log('picker-multiSelector changed，值为', e.detail.value)
    8.   
  
  
  8.  this.setData(
    9.   
  
  
  9.  'multiIndex', e.detail.value
    10.   
  
  
  10.  );
    11.   
  
  
  11.  },
    12.   
  
  
  12.  bindMultiPickerColumnChange: function (e) {
    13.   
  
  
  13.  console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    14.   
  
  
  14.  var data = {
    15.   
  
  
  15.  multiArray: this.getData('multiArray'),
    16.   
  
  
  16.  multiIndex: this.getData('multiIndex')
    17.   
  
  
  17.  };
    18.   
  
  
  18.  data.multiIndex[e.detail.column] = e.detail.value;
    19.   
  
  
  19.  switch (e.detail.column) {
    20.   
  
  
  20.  case 0:
    21.   
  
  
  21.  switch (data.multiIndex[0]) {
    22.   
  
  
  22.  case 0:
    23.   
  
  
  23.  data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
    24.   
  
  
  24.  data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
    25.   
  
  
  25.  break;
    26.   
  
  
  26.  case 1:
    27.   
  
  
  27.  data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
    28.   
  
  
  28.  data.multiArray[2] = ['鲫鱼', '带鱼'];
    29.   
  
  
  29.  break;
    30.   
  
  
  30.  }
    31.   
  
  
  31.  data.multiIndex[1] = 0;
    32.   
  
  
  32.  data.multiIndex[2] = 0;
    33.   
  
  
  33.  break;
    34.   
  
  
  34.  case 1:
    35.   
  
  
  35.  switch (data.multiIndex[0]) {
    36.   
  
  
  36.  case 0:
    37.   
  
  
  37.  switch (data.multiIndex[1]) {
    38.   
  
  
  38.  case 0:
    39.   
  
  
  39.  data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
    40.   
  
  
  40.  break;
    41.   
  
  
  41.  case 1:
    42.   
  
  
  42.  data.multiArray[2] = ['蛔虫'];
    43.   
  
  
  43.  break;
    44.   
  
  
  44.  case 2:
    45.   
  
  
  45.  data.multiArray[2] = ['蚂蚁', '蚂蟥'];
    46.   
  
  
  46.  break;
    47.   
  
  
  47.  case 3:
    48.   
  
  
  48.  data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
    49.   
  
  
  49.  break;
    50.   
  
  
  50.  case 4:
    51.   
  
  
  51.  data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
    52.   
  
  
  52.  break;
    53.   
  
  
  53.  }
    54.   
  
  
  54.  break;
    55.   
  
  
  55.  case 1:
    56.   
  
  
  56.  switch (data.multiIndex[1]) {
    57.   
  
  
  57.  case 0:
    58.   
  
  
  58.  data.multiArray[2] = ['鲫鱼', '带鱼'];
    59.   
  
  
  59.  break;
    60.   
  
  
  60.  case 1:
    61.   
  
  
  61.  data.multiArray[2] = ['青蛙', '娃娃鱼'];
    62.   
  
  
  62.  break;
    63.   
  
  
  63.  case 2:
    64.   
  
  
  64.  data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
    65.   
  
  
  65.  break;
    66.   
  
  
  66.  }
    67.   
  
  
  67.  break;
    68.   
  
  
  68.  }
    69.   
  
  
  69.  data.multiIndex[2] = 0;
    70.   
  
  
  70.  break;
    71.   
  
  
  71.  }
    72.   
  
  
  72.  this.setData('multiArray', data.multiArray);
    73.   
  
  
  73.  this.setData('multiIndex', data.multiIndex);
    74.   
  
  
  74.  }
    75.   
  
  
  75. });
    76.

代码示例 5：省市区选择器

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  省市区选择器
    5.   
  
  
  5.  mode="region"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  bind:change="regionChange"
    10.   
  
  
  10.  custom-item="{{customItem}}"
    11.   
  
  
  11.  title="地区选择器">
    12.   
  
  
  12.  
    13.   
  
  
  13.  请选择地区:{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  regionData: ['全部', '全部', '全部']
    4.   
  
  
  4.  },
    5.   
  
  
  5.  regionChange(e) {
    6.   
  
  
  6.  this.setData(
    7.   
  
  
  7.  'regionData', e.detail.value
    8.   
  
  
  8.  );
    9.   
  
  
  9.  console.log('picker-time changed，值为', e.detail.value);
    10.   
  
  
  10.  }
    11.   
  
  
  11. });
    12.

代码示例 6：设置禁用

  • SWAN
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  设置禁用
    5.   
  
  
  5.  disabled
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  class="disabled"
    10.   
  
  
  10.  value="{{arrIndex}}"
    11.   
  
  
  11.  range="{{selector}}"
    12.   
  
  
  12.  range-key="name"
    13.   
  
  
  13.  disabled>
    14.   
  
  
  14.  
    15.   
  
  
  15.  请选择:{{selector[arrIndex].name}}
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.

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

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  取消选择时触发提示
    5.   
  
  
  5.  bindcancel
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9.  value="{{arrIndex}}"
    10.   
  
  
  10.  range="{{selector}}"
    11.   
  
  
  11.  range-key="name"
    12.   
  
  
  12.  bind:change="selectorChange"
    13.   
  
  
  13.  bind:cancel="cancel">
    14.   
  
  
  14.  
    15.   
  
  
  15.  请选择:{{selector[arrIndex].name}}
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  arrIndex: 0,
    4.   
  
  
  4.  selector: ['选项一', '选项二', '选项三']
    5.   
  
  
  5.  },
    6.   
  
  
  6.  selectorChange(e) {
    7.   
  
  
  7.  console.log('picker-selector changed，值为', e.detail.value);
    8.   
  
  
  8.  this.setData('arrIndex', e.detail.value);
    9.   
  
  
  9.  },
    10.   
  
  
  10.  cancel() {
    11.   
  
  
  11.  swan.showToast({
    12.   
  
  
  12.  title: '用户取消选择',
    13.   
  
  
  13.  icon: 'none'
    14.   
  
  
  14.  });
    15.   
  
  
  15.  }
    16.   
  
  
  16. });
    17.

Bug & Tip

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

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


本文名称：创新互联百度小程序教程：picker底部弹起的滚动选择器
本文网址：http://bluegullmedia.com/article/dhjjphe.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务

5.6485s