日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：picker底部彈起的滾動選擇器
  • picker 底部彈起的滾動選擇器
    • 屬性說明
      • mode 的有效值
      • 普通選擇器：mode = selector
      • 時間選擇器：mode = time
      • 日期選擇器：mode = date
      • 多列選擇器：mode = multiSelector
      • 省市區(qū)選擇器：mode = region
    • 示例
      • 代碼示例 1：普通選擇器
      • 代碼示例 2：時間選擇器
      • 代碼示例 3：日期選擇器
      • 代碼示例 4：多列選擇器
      • 代碼示例 5：省市區(qū)選擇器
      • 代碼示例 6：設(shè)置禁用
      • 代碼示例 7：取消選擇時觸發(fā)提示
    • Bug & Tip

    picker 底部彈起的滾動選擇器

    解釋：從底部彈起的滾動選擇器。現(xiàn)支持五種選擇器，通過 mode 來區(qū)分，分別是時間選擇器、日期選擇器、普通選擇器、多列選擇器以及省市區(qū)選擇器，默認(rèn)是普通選擇器。如需級聯(lián)選擇功能，可使用 Smart UI 組件，詳見 cascade 級聯(lián)。

    屬性說明

    屬性 類型 默認(rèn)值 必填 說明
    mode String selector 否 選擇器類型
    disabled Boolean false 否 是否禁用
    bindcancel EventHandle 否 取消選擇或點擊遮罩層收起 picker 時觸發(fā)

    除去上述通用屬性外，針對不同的 mode，picker 組件還提供有其他不同的屬性，詳細(xì)介紹見下。

    mode 的有效值

    值 說明
    selector 普通選擇器
    time 時間選擇器
    date 日期選擇器
    multiSelector 多列選擇器
    region 省市區(qū)選擇器

    普通選擇器：mode = selector

    屬性名 類型 默認(rèn)值 說明
    range Array/Array. [] mode 為 selector 或 multiSelector 時，range 有效
    range-key String 當(dāng) range 是一個 Array. 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
    value Number 0 value 的值表示選擇了 range 中的第幾個（下標(biāo)從 0 開始）
    bindchange EventHandle value 改變時觸發(fā) change 事件， event.detail = {value: value}
    title String 選擇器標(biāo)題，建議標(biāo)題控制在 12 個中文漢字長度內(nèi)，避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示

    時間選擇器：mode = time

    屬性名 類型 默認(rèn)值 說明
    value String 表示選中的時間，格式為“hh:mm”
    start String 表示有效時間范圍的開始，字符串格式為“hh:mm”
    end String 表示有效時間范圍的結(jié)束，字符串格式為“hh:mm”
    bindchange EventHandle value 改變時觸發(fā) change 事件， event.detail = {value: value}
    title String 選擇器標(biāo)題，建議標(biāo)題控制在 12 個中文漢字長度內(nèi)，避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示

    日期選擇器：mode = date

    屬性名 類型 默認(rèn)值 說明
    value String 當(dāng)前日期 表示選中的日期，格式為“YYYY-MM-DD”
    start String 表示有效日期范圍的開始，字符串格式為“YYYY-MM-DD”
    end String 表示有效日期范圍的結(jié)束，字符串格式為“YYYY-MM-DD”
    fields String day 有效值 year、 month、 day ，表示選擇器的粒度
    bindchange EventHandle value 改變時觸發(fā) change 事件， event.detail = {value: value}
    title String 選擇器標(biāo)題，建議標(biāo)題控制在 12 個中文漢字長度內(nèi)，避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示

    fields 有效值

    值 說明
    year 選擇器粒度為年
    month 選擇器粒度為月
    day 選擇器粒度為天

    多列選擇器：mode = multiSelector

    屬性名 類型 默認(rèn)值 說明
    range Array/Array. [] mode 為 selector 或 multiSelector 時， range 有效。二維數(shù)組，長度表示多少列，數(shù)組的每項表示每列的數(shù)據(jù)，如[[“a”,”b”], [“c”,”d”]]。
    range-key String 當(dāng) range 是一個二維 Array. 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
    value Array [] value 每一項的值表示選擇了 range 對應(yīng)項中的第幾個（下標(biāo)從 0 開始）
    bindcolumnchange EventHandle 某一列的值改變時觸發(fā) columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標(biāo)從 0 開始），value 的值表示變更值的下標(biāo)
    bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value: value}
    title String 選擇器標(biāo)題，建議標(biāo)題控制在 12 個中文漢字長度內(nèi)，避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示

    省市區(qū)選擇器：mode = region

    屬性名 類型 默認(rèn)值 說明
    value Array [] 表示選中的省市區(qū)，默認(rèn)選中每一列的第一個值
    custom-item String 可為每一列的頂部添加一個自定義的項
    bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value}，暫不支持統(tǒng)計用區(qū)劃代碼（code）、郵政編碼（postcode）
    title String 選擇器標(biāo)題，建議標(biāo)題控制在 12 個中文漢字長度內(nèi)，避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示

    示例

    跳轉(zhuǎn)編輯工具

    在開發(fā)者工具中打開

    在 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="選擇器標(biāo)題"
      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: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']]
      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] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
      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：省市區(qū)選擇器

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  省市區(qū)選擇器
      5.   
  
  
    5.  mode="region"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  bind:change="regionChange"
      10.   
  
  
    10.  custom-item="{{customItem}}"
      11.   
  
  
    11.  title="地區(qū)選擇器">
      12.   
  
  
    12.  
      13.   
  
  
    13.  請選擇地區(qū):{{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：設(shè)置禁用

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  設(shè)置禁用
      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：取消選擇時觸發(fā)提示

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  取消選擇時觸發(fā)提示
      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：基礎(chǔ)庫版本 11.15 以下：picker 組件在 iOS 系統(tǒng)中從底部彈出，在安卓系統(tǒng)中從中間彈出。

    • Tip：基礎(chǔ)庫版本 11.15 及以上：picker 組件雙端都是從底部彈出。


    網(wǎng)站欄目：創(chuàng)新互聯(lián)百度小程序教程：picker底部彈起的滾動選擇器
    分享地址：http://www.dlmjj.cn/article/dhjjphe.html