400-028-6601
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

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

  • picker 底部弹起的滚动选择器
    • 属性说明
      • mode 的有效值
      • 普通选择器：mode = selector
      • 时间选择器：mode = time
      • 日期选择器：mode = date
      • 多列选择器：mode = multiSelector
      • 省市区选择器：mode = region
    • 示例
      • 代码示例 1：普通选择器
      • 代码示例 2：时间选择器
      • 代码示例 3：日期选择器
      • 代码示例 4：多列选择器
      • 代码示例 5：省市区选择器
      • 代码示例 6：设置禁用
      • 代码示例 7：取消选择时触发提示
    • Bug & Tip

    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：普通选择器

    • SWAN
    • JS
     
 
 
      
  
  
  
      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://www.hnjierui.cn/article/dhjjphe.html

    其他资讯