欧美日韩精品一区二区在线线,一级无码在线收看,精品国产高清91,久久精品欧美电影

# picker

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

微信 Windows 版:支持

微信 Mac 版:支持

微信 鴻蒙 OS 版:支持

渲染框架支持情況:Skyline (使用最新 Nightly 工具調(diào)試)、WebView

# 功能描述

從底部彈起的滾動(dòng)選擇器。

# 通用屬性

屬性 類型 默認(rèn)值 必填 說明 最低版本
header-text string 選擇器的標(biāo)題,僅安卓可用 2.11.0
mode string selector 選擇器類型 1.0.0
合法值 說明
selector 普通選擇器
multiSelector 多列選擇器
time 時(shí)間選擇器
date 日期選擇器
region 省市區(qū)選擇器
disabled boolean false 是否禁用 1.0.0
bindcancel eventhandle 取消選擇時(shí)觸發(fā) 1.9.90

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

# 普通選擇器:mode = selector

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

# 多列選擇器:mode = multiSelector

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

# 時(shí)間選擇器:mode = time

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

# 日期選擇器: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 改變時(shí)觸發(fā) change 事件,event.detail = {value}

fields 有效值:

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

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

屬性名 類型 默認(rèn)值 說明 最低版本
value array [] 表示選中的省市區(qū),默認(rèn)選中每一列的第一個(gè)值
custom-item string 可為每一列的頂部添加一個(gè)自定義的項(xiàng) 1.5.0
level string region 選擇器層級 2.21.1
bindchange eventhandle value 改變時(shí)觸發(fā) change 事件,event.detail = {value, code, postcode},其中字段 code 是統(tǒng)計(jì)用區(qū)劃代碼,postcode 是郵政編碼

level 的有效值

說明
province 省級選擇器
city 市級選擇器
region 區(qū)級選擇器
sub-district 街道選擇器

# 示例代碼

在開發(fā)者工具中預(yù)覽效果

<view class="section">
  <view class="section__title">普通選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      當(dāng)前選擇:{{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">
      當(dāng)前選擇:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">時(shí)間選擇器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      當(dāng)前選擇: {{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">
      當(dāng)前選擇: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市區(qū)選擇器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      當(dāng)前選擇:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
  </picker>
</view>
Page({
  data: {
    array: ['美國', '中國', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美國'
      },
      {
        id: 1,
        name: '中國'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [['無脊柱動(dòng)物', '脊柱動(dòng)物'], ['扁性動(dòng)物', '線形動(dòng)物', '環(huán)節(jié)動(dòng)物', '軟體動(dòng)物', '節(jié)肢動(dòng)物'], ['豬肉絳蟲', '吸血蟲']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '無脊柱動(dòng)物'
        },
        {
          id: 1,
          name: '脊柱動(dòng)物'
        }
      ], [
        {
          id: 0,
          name: '扁性動(dòng)物'
        },
        {
          id: 1,
          name: '線形動(dòng)物'
        },
        {
          id: 2,
          name: '環(huán)節(jié)動(dòng)物'
        },
        {
          id: 3,
          name: '軟體動(dòng)物'
        },
        {
          id: 4,
          name: '節(jié)肢動(dòng)物'
        }
      ], [
        {
          id: 0,
          name: '豬肉絳蟲'
        },
        {
          id: 1,
          name: '吸血蟲'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['廣東省', '廣州市', '海珠區(qū)'],
    customItem: '全部'
  },
  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] = ['扁性動(dòng)物', '線形動(dòng)物', '環(huán)節(jié)動(dòng)物', '軟體動(dòng)物', '節(jié)肢動(dòng)物'];
            data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
            break;
          case 1:
            data.multiArray[1] = ['魚', '兩棲動(dòng)物', '爬行動(dòng)物'];
            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] = ['昆蟲', '甲殼動(dòng)物', '蛛形動(dòng)物', '多足動(dòng)物'];
                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發(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
    })
  }
})