代码Github地址

一. 说明

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

1. 普通选择器：mode = selector

// wxml
  <!-- 普通选择器 -->
  <view class="picker-container">
    <text>普通选择器(字符串数组数据)：mode = selector</text>
    <picker class="picker" mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange" bindcancel="cancel">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </view>

  <view class="picker-container">
    <text>普通选择器（对象数组数据）：mode = selector</text>
    <picker class="picker" mode="selector" range="{{objectArray}}" range-key="name" value="{{index}}" bindchange="bindPickerChange">
      <view class="picker">
        当前选择：{{objectArray[index].name}}
      </view>
    </picker>
  </view>

// wxss
.picker-container {
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
  font-size: 40rpx;
}

.picker {
  margin-left: 10%;
  margin-right: 10%;
  background-color: orange;
}

// js
  data: {
    // 普通选择器
    array: ['苹果', '橘子', '香蕉', '西红柿'],  // 字符串数组
    index: 1,  // 默认选中第几行
    objectArray: [    // 对象数组
      { id: 0, name: '苹果' },
      { id: 1, name: '橘子' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '西红柿'}
    ],
 }，

  bindPickerChange: function (event) {
    console.log('picker发送选择改变，携带值为', event.detail.value)
    this.setData({
      index: event.detail.value
    })
  },
  cancel: function (event) {
    console.log("取消了");
  },

2. 普通选择器：mode = multiSelector

// wxml
  <!-- 多列选择器 -->
  <view class="picker-container">
    <text>多列选择器(二维数组) ：mode = multiSelector</text>
    <picker class="picker" mode="multiSelector" range="{{multiArray}}" value="{{multiIndex}}" bindchange="multiBindchange">
      <view class="picker">
        当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
      </view>
    </picker>
  </view>

// wxss
.picker-container {
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
  font-size: 40rpx;
}

.picker {
  margin-left: 10%;
  margin-right: 10%;
  background-color: orange;
}

// js
  data: {
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    multiIndex: [0, 1, 2],
  },
  multiBindchange: function (event) {
    console.log('picker发送选择改变，携带值为', event.detail.value)
    this.setData({
      multiIndex: [event.detail.value[0], event.detail.value[1], event.detail.value[2]]
    })
  },
  multiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
  },

3. 时间选择器：mode = time

// wxml
  <!-- 时间选择器 -->
  <view class="picker-container">
    <text>时间选择器：mode = time</text>
    <picker class="picker" mode="time" value="{{timeValue}}" start="{{start}}" end="{{end}}" bindchange="timeChange">
      <view class="picker">
        当前选择: {{timeValue}}
      </view>
    </picker>
  </view>

 // wxss
.picker-container {
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
  font-size: 40rpx;
}

.picker {
  margin-left: 10%;
  margin-right: 10%;
  background-color: orange;
}

// js 
  data: {
    timeValue: "12:00",  // 选中的时间
    start: "00:00", // 开始时间
    end: "24:00",
  },

  timeChange: function (event) {
    let time = event.detail.value;

    console.log(event);
    this.setData({
      timeValue: time
    });
  },

4. 日期选择器：mode = date

// wxml
  <!-- 日期选择器 -->
  <view class="picker-container">
    <text>日期选择器：mode = date</text>
    <picker class="picker" fields="month" mode="date" value="{{dateValue}}" start="{{dateStart}}" end="{{dateEnd}}" bindchange="dateChange">
      <view class="picker">
        当前选择: {{dateValue}}
      </view>
    </picker>
  </view>

// js
.picker-container {
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
  font-size: 40rpx;
}

.picker {
  margin-left: 10%;
  margin-right: 10%;
  background-color: orange;
}

// js 
data : {
    dateValue: "2018-06-21",   // 日期选中时间
    dateStart: "2018-01-01",   // 日期开始时间
    dateEnd: "2018-12-30",     // 日期结束时间
  },
  dateChange: function (event) {
    let date = event.detail.value;

    console.log(event);
    this.setData({
      dateValue: date
    });
  },

5. 地区选择器：mode = region

// wxml
  <!-- 省市区选择器 -->
  <view class="picker-container">
    <text>省市区选择器：mode = region</text>
    <picker class="picker" mode="region" value="{{regionValue}}" custom-item="{{custom}}" bindchange="regionChange">
      <view class="picker">
        当前选择: {{regionValue}}
      </view>
    </picker>
  </view>

// wxss
.picker-container {
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
  font-size: 40rpx;
}

.picker {
  margin-left: 10%;
  margin-right: 10%;
  background-color: orange;
}

// js 
data : {
    regionValue: ["山东省","枣庄市","滕州市"],  // 默认选中，不填或者空，就默认第一个
    custom : "全部",
},

  regionChange: function (event) {
    let region = event.detail.value;

    console.log(event);
    this.setData({
      regionValue: region
    });
  },