表单组件_picker

从底部弹起的滚动选择器，选择器有很多种类，分别是

• 普通选择器
• 多列选择器
• 时间选择器
• 日期选择器
• 省市区选择器

普通选择器

指定mode属性为selector,或者默认不指定mode

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker"> 当前选择：{{array[index]}} </view>
</picker>

Page({
  data: {
    array: ["美国", "中国", "巴西", "日本"],
    index: 0,
  },
  bindPickerChange(e) {
    this.setData({
      index: e.detail.value,
    });
  },
});

多列选择器

指定mode属性为multiSelector

<picker
  mode="multiSelector"
  bindchange="bindMultiPickerChange"
  value="{{multiIndex}}"
  range="{{multiArray}}"
>
  <view class="picker">
    当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

Page({
  data: {
    multiArray: [
      ["无脊柱动物", "脊柱动物"],
      ["扁性动物", "线形动物", "环节动物", "软体动物", "节肢动物"],
      ["猪肉绦虫", "吸血虫"],
    ],
    multiIndex: [0, 0, 0],
  },
  bindMultiPickerChange: function (e: any) {
    this.setData({
      multiIndex: e.detail.value,
    });
  },
});

时间选择器

指定mode属性为time

<picker
  mode="time"
  value="{{time}}"
  start="09:01"
  end="21:01"
  bindchange="bindTimeChange"
>
  <view class="picker"> 当前选择: {{time}} </view>
</picker>

Page({
  data: {
    time: "12:01",
  },
  bindTimeChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      time: e.detail.value,
    });
  },
});

日期选择器

指定mode属性为date

<picker
  mode="date"
  value="{{date}}"
  start="2000-09-01"
  end="2030-09-01"
  bindchange="bindDateChange"
>
  <view class="picker"> 当前选择: {{date}} </view>
</picker>

Page({
  data: {
    date: "2030-09-01",
  },
  bindDateChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      date: e.detail.value,
    });
  },
});

省市区选择器

指定mode属性为region

<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
  <view class="picker">
    当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  </view>
</picker>

Page({
  data: {
    region: ["广东省", "广州市", "海珠区"],
  },
  bindRegionChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      region: e.detail.value,
    });
  },
});