picker

基礎(chǔ)庫 1.0.0 開始支持本組件

從底部彈起的滾動選擇器，現(xiàn)支持五種選擇器，通過 mode 屬性來設(shè)置，分別是 普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區(qū)選擇器，默認是 普通選擇器。

屬性說明

除了上述通用的屬性，對于不同的 mode，picker 擁有不同的屬性，見下方。

普通選擇器 mode="selector"

多列選擇器 mode="multiSelector"

range 最多支持 5 列數(shù)據(jù)，超出部分會直接忽略

bindcolumnchange 說明

event.detail.column 表示改變了第幾列（下標從 0 開始）

event.detail.value value 的值表示變更值的下標 (下標從 0 開始)

時間選擇器 mode="time"

日期選擇器 mode="date"

地區(qū)選擇器 mode="region"

效果示例

代碼示例

<view class="section__title">普通選擇器</view>
<picker
  value="{{index}}"
  range="{{array}}"
  bindchange="bindPickerChange"
  bindcancel="bindPickerCancel"
>
  <view class="picker">
    當前選擇：{{array[index]}}
  </view>
</picker>

<view class="section__title">普通Object選擇器</view>
<picker
  bindchange="bindObjectPickerChange"
  value="{{objectIndex}}"
  range="{{objectArray}}"
  range-key="en"
>
  <view class="picker">
    當前選擇：{{objectArray[objectIndex]['en']}}
  </view>
</picker>

<view class="section__title">多列選擇器</view>
<picker
  mode="multiSelector"
  bindchange="bindMultiPickerChange"
  bindcolumnchange="bindMultiPickerColumnChange"
  value="{{multiIndex}}"
  range="{{multiArray}}"
>
  <view class="picker">
    當前選擇：{{multiArray[0][multiIndex[0]]}}，
    {{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

<view class="section__title">時間選擇器</view>
<picker
  mode="time"
  value="{{time}}"
  start="{{timeStart}}"
  end="{{timeEnd}}"
  bindchange="bindTimeChange"
>
  <view class="picker">
    當前選擇: {{time}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker
  mode="date"
  value="{{date}}"
  start="2015-09-01"
  end="2017-09-01"
  bindchange="bindDateChange"
  fields="year"
>
  <view class="picker">
    當前選擇: {{date}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker
  mode="date"
  value="{{date}}"
  start="2015-09-01"
  end="2017-09-01"
  bindchange="bindDateChange"
  fields="month"
>
  <view class="picker">
    當前選擇: {{date}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker
  mode="date"
  value="{{date}}"
  start="2015-09-01"
  end="2017-09-01"
  bindchange="bindDateChange"
  fields="day"
>
  <view class="picker">
    當前選擇: {{date}}
  </view>
</picker>

const ms = [
  [
    // 0
    "無脊柱動物",
    "脊柱動物"
  ],
  [
    // 1
    [
      // 1 0
      "扁性動物",
      "線形動物",
      "環(huán)節(jié)動物",
      "軟體動物",
      "節(jié)肢動物"
    ],
    [
      // 1 1
      "魚",
      "兩棲動物",
      "爬行動物",
      "test"
    ]
  ],
  [
    // 2
    [
      // 2 0
      ["豬肉絳蟲", "吸血蟲"],
      ["蛔蟲"],
      ["螞蟻", "螞蟥"],
      ["河蚌", "蝸牛", "蛞蝓"],
      ["昆蟲", "甲殼動物", "蛛形動物", "多足動物"]
    ],
    [
      // 2 1
      ["鯽魚", "帶魚"],
      ["青蛙", "娃娃魚"],
      ["蜥蜴", "龜", "壁虎"],
      []
    ]
  ]
];

Page({
  data: {
    array: ["美國", "中國", "巴西", "日本"],
    index: 0,
    objectArray: [
      {
        id: 0,
        name: "美國",
        en: "USA"
      },
      {
        id: 1,
        name: "中國",
        en: "China"
      },
      {
        id: 2,
        name: "巴西",
        en: "Brasil"
      },
      {
        id: 3,
        name: "日本",
        en: "Japan"
      }
    ],
    objectIndex: 0,
    multiArray: [
      ["無脊柱動物", "脊柱動物"],
      ["扁性動物", "線形動物", "環(huán)節(jié)動物", "軟體動物", "節(jié)肢動物"],
      ["豬肉絳蟲", "吸血蟲"]
    ],
    multiIndex: [0, 0, 0],
    objectMultiIndex: [0, 0, 0],
    date: "2016-09-01",
    time: "12:01",
    timeStart: "09:01",
    timeEnd: "21:01"
  },
  bindPickerChange(e) {
    console.log("picker發(fā)送選擇改變，攜帶值為", e.detail.value);
    this.setData({
      index: e.detail.value
    });
  },
  bindObjectPickerChange(e) {
    console.log("picker發(fā)送選擇改變，攜帶值為", e.detail.value);
    this.setData({
      objectIndex: e.detail.value
    });
  },
  bindMultiPickerChange(e) {
    console.log("picker發(fā)送選擇改變，攜帶值為", e.detail.value);
    this.setData({
      multiIndex: e.detail.value
    });
  },
  bindMultiPickerColumnChange(e) {
    console.log("修改的列為", e.detail.column, "，值為", e.detail.value);
    const data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    switch (e.detail.column) {
      case 0:
        data.multiIndex[0] = e.detail.value;
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        data.multiArray[1] = ms[1][data.multiIndex[0]];
        data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
        break;
      case 1:
        data.multiIndex[1] = e.detail.value;
        data.multiIndex[2] = 0;
        data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
        break;
      case 2:
        data.multiIndex[2] = e.detail.value;
        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
    });
  },
  bindPickerCancel: function(e) {
    console.log(e);
    tt.showToast({ title: "cancel" });
  }
});