表单组件_picker

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

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

普通选择器

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

wxml

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

ts

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

多列选择器

指定mode属性为multiSelector

wxml

<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>

ts

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

时间选择器

指定mode属性为time

wxml

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

ts

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

日期选择器

指定mode属性为date

wxml

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

ts

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

省市区选择器

指定mode属性为region

wxml

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

ts

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

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。