日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第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

基礎(chǔ)庫 1.0.0 開始支持,低版本需做 兼容處理。

從底部彈起的滾動選擇器。

屬性類型默認(rèn)值必填說明最低版本
header-textstring選擇器的標(biāo)題,僅安卓可用2.11.0
modestringselector選擇器類型1.0.0
disabledbooleanfalse是否禁用1.0.0
bindcanceleventhandle取消選擇時觸發(fā)1.9.90

mode 的合法值

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

除了上述通用的屬性,對于不同的mode,picker擁有不同的屬性。

普通選擇器:mode = selector

屬性名類型默認(rèn)值說明最低版本
rangearray/object array[]mode 為 selector 或 multiSelector 時,range 有效
range-keystring當(dāng) range 是一個 Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
valuenumber0表示選擇了 range 中的第幾個(下標(biāo)從 0 開始)
bindchangeeventhandlevalue 改變時觸發(fā) change 事件,event.detail = {value}

多列選擇器:mode = multiSelector

屬性名類型默認(rèn)值說明最低版本
rangearray/object array[]mode 為 selector 或 multiSelector 時,range 有效
range-keystring當(dāng) range 是一個 Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
valuearray[]表示選擇了 range 中的第幾個(下標(biāo)從 0 開始)
bindchangeeventhandlevalue 改變時觸發(fā) change 事件,event.detail = {value}
bindcolumnchangeeventhandle列改變時觸發(fā)

時間選擇器:mode = time

屬性名類型默認(rèn)值說明最低版本
valuestring表示選中的時間,格式為"hh:mm"
startstring表示有效時間范圍的開始,字符串格式為"hh:mm"
endstring表示有效時間范圍的結(jié)束,字符串格式為"hh:mm"
bindchangeeventhandlevalue 改變時觸發(fā) change 事件,event.detail = {value}

日期選擇器:mode = date

屬性名類型默認(rèn)值說明最低版本
valuestring當(dāng)天表示選中的日期,格式為"YYYY-MM-DD"
startstring表示有效日期范圍的開始,字符串格式為"YYYY-MM-DD"
endstring表示有效日期范圍的結(jié)束,字符串格式為"YYYY-MM-DD"
fieldsstringday有效值 year,month,day,表示選擇器的粒度
bindchangeeventhandlevalue 改變時觸發(fā) change 事件,event.detail = {value}

fields 有效值:*

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

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

屬性名類型默認(rèn)值說明最低版本
valuearray[]表示選中的省市區(qū),默認(rèn)選中每一列的第一個值
custom-itemstring可為每一列的頂部添加一個自定義的項1.5.0
bindchangeeventhandlevalue 改變時觸發(fā) change 事件,event.detail = {value, code, postcode},其中字段 code 是統(tǒng)計用區(qū)劃代碼,postcode 是郵政編碼

示例代碼:


    >普通選擇器
    
        
            當(dāng)前選擇: {{array[index]}}
        
    


    多列選擇器
    
     
       當(dāng)前選擇: {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
     



    >時間選擇器   當(dāng)前選擇: {{time}}   

日期選擇器 當(dāng)前選擇: {{date}}

省市區(qū)選擇器 當(dāng)前選擇: {{region[0]}},{{region[1]}},{{region[2]}}

Page({
  data: {
    array: ['美國', '中國', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美國'
      },
      {
        id: 1,
        name: '中國'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '無脊柱動物'
        },
        {
          id: 1,
          name: '脊柱動物'
        }
      ], [
        {
          id: 0,
          name: '扁性動物'
        },
        {
          id: 1,
          name: '線形動物'
        },
        {
          id: 2,
          name: '環(huán)節(jié)動物'
        },
        {
          id: 3,
          name: '軟體動物'
        },
        {
          id: 3,
          name: '節(jié)肢動物'
        }
      ], [
        {
          id: 0,
          name: '豬肉絳蟲'
        },
        {
          id: 1,
          name: '吸血蟲'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['廣東省', '廣州市', '海珠區(qū)']
  },
  bindPickerChange: function(e) {
    console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker發(fā)送選擇改變,攜帶值為', 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] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
            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;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
  bindDateChange: function(e) {
    console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})


分享標(biāo)題:創(chuàng)新互聯(lián)小程序教程:微信小程序表單組件 picker
瀏覽路徑:http://www.dlmjj.cn/article/djsdgos.html