微信小程序 ----- picker

微信小程序之弹出框

不管是微信小程序和移动端很多时候都涉及到点击弹出下拉框的情况，自己封装弹出框组件顾然可以，但是今天我将来介绍微信官方的，弹出下拉框组件picker

picker的简单使用

如下代码：

<picker mode="selector" range="{{leaderNameList}}" bindchange="changeLeaderName">
  <view class="item">
    <text class="item-label">负责人</text>
        <view class="picker">
          当前选择: {{leaderName}}
        </view>
  </view>
</picker>

将需要点击的元素包裹起来，mode表示弹出框的类型，后续内容我会详细讲解，这里的selector是使用的最多的一个属性值，range表示遍历自己data中的数组leaderNameList的数据，changeLeader表示选择下拉框选项之后的回调函数，我们通常在这个函数里面执行this.setData的操作，将我们选择的值保存下来，如下是js代码部分：

 changeLeaderName: function (e) {
     const _leaderNameList = this.data.leaderNameList
    // 获取的是索引
    const _index = e.detail.value
    this.setData({
      leaderName: _leaderNameList[_index],
    })
}

e.detail.value获取到的是选择了第几个，和索引类似，通过索引就可以更新数据，然后再显示到相应的元素上。这里的leaderNameList是数组，当我们遇到我们需要遍历的是对象数组的时候，指定range-key就可以指定弹出框选择的是哪个键的值。

mode的不同值介绍

selector 普通选择器，上面已经结束过，range属性上需要给定一个数组来遍历，并且需要回调函数来更新数据

multiSelector 多列选择器，用到的不多，我之后用到了再补充

time 时间选择器，start，end设置选择时间的范围，同样的需要回调函数，这里接受的e.detail.value就是选择的时间值

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

下面是回调函数

 bindDateChange: function (e) {
    this.setData({
      time: e.detail.value
    })
 }

date 日期选择器，和时间选择器类似

<picker mode="date" start="2020-09-01" end="2025-09-01" bindchange="bindDateChange">
  <view class="order-cell">
    <text class="order-cell-label">预计时间</text>
        <view class="picker">
          当前选择: {{date}}
        </view>
  </view>
</picker>

下面是回调函数

 bindDateChange: function (e) {
    this.setData({
      date: e.detail.value
    })
 }

region 省区选择器，这里接受的e.detail.value就是选择地址

 <picker mode="region" bind:change="saveSendRegion">
    <view class="contain-item">
      <view class="contain-item-left">省区市</view>
        <view class="picker">
          当前选择: {{send_region}}
        </view>
    </view>
  </picker>
  
  

下面是回调函数：

saveSendRegion(e) {
    this.setData({
      send_region: e.detail.value
    })
}