知曉程式設計師，專注微信小程式開發的程式設計師！

今天來說一下小程式中picker元件的使用，官方說明如下：從底部彈起的滾動選擇器，現支援五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，預設是普通選擇器。

1、普通選擇器

普通選擇器更像是HTML中的select標籤，主要實現單選功能，直接看官網示例就可以明白，很簡單，以下是我寫的demo~

WXML:

<view class="section">
  <view class="section__title">普通選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      您最喜歡的顏色：{{array[index]}}
    </view>
  </picker>
</view>
 

JS

Page({
  data: {
    array: ["紅色", "藍色", "綠色", "黑色", "白色", "紫色", "黃色", "橙色"],
    index: 0,
  },
  onLoad: function (options) {
  
  },
  bindPickerChange: function(e){
    console.log(e);
    this.setData({
      index: e.detail.value
    })
  }
})

二、時間選擇器

選擇開始時間和結束時間都可以用，此選擇器接收字串格式為"hh:mm"的時間，最小隻能選擇到分鐘~

WXML:

<picker mode="time" value="{{startTime}}" bindchange="changeStartTime">
  <view class="checkin-info-item">
    <view class="label">開始時間</view>
    <view class="checkin-info-row">
      <view>{{startTime}}</view>
    </view>
  </view>
</picker>
<picker mode="time" value="{{endTime}}" bindchange="changeEndTime">
  <view class="checkin-info-item">
    <view class="label">結束時間</view>
    <view class="checkin-info-row">
      <view>{{endTime}}</view>
    </view>
  </view>
</picker>
 

屬性值start表示有效時間範圍的開始，end表示有效時間範圍的結束

JS:

Page({
  data: {
    startTime: '00:00',
    endTime: '23:59',
  },
  onLoad: function (options) {
  
  }
})

3、日期選擇器

日期選擇器也是比較常用的，可以設定最小時間/最大時間，超出這個時間段是無法選擇的~

WXML:

<picker mode="date" value="{{startDate}}" start="{{minDate}}" end="{{endDate}}" bindchange="changeStartDate">
  <view class="checkin-info-item first">
    <view class="label">開始日期</view>
    <view class="checkin-info-row">
      <view>{{startDate}}</view>
    </view>
  </view>
</picker>

<picker mode="date" value="{{endDate}}" start="{{startDate}}" end="{{maxDate}}" bindchange="changeEndDate">
  <view class="checkin-info-item">
    <view class="label">結束日期（持續{{dateDifference+1}}天）</view>
    <view class="checkin-info-row">
      <view>{{endDate}}</view>
    </view>
  </view>
</picker>

JS:

var util = require('../../utils/util.js');
Page({
  data: {
    startDate: '2017-01-01',
    endDate: '2020-01-01',
    dateDifference: 0,
  },
  onLoad: function (options) {
    var self = this;
    this.setData({
      dateDifference: util.dateDifference(self.data.startDate, self.data.endDate),
    })
  }
})