小程序中picker的使用|日期、时间、省市区联动都可以用它实现

连胜

发布于 2018-03-07 02:50:52

3.3K00

代码可运行

文章被收录于专栏：微信小程序开发微信小程序开发

运行总次数：0

代码可运行

知晓程序员，专注微信小程序开发的程序员！

今天来说一下小程序中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>

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),
    })
  }
})