代碼Github地址

一. 說(shuō)明

從底部彈起的滾動(dòng)選擇器，現(xiàn)支持五種選擇器棚唆，通過(guò)mode來(lái)區(qū)分暇赤，分別是普通選擇器，多列選擇器宵凌，時(shí)間選擇器鞋囊，日期選擇器，省市區(qū)選擇器瞎惫，默認(rèn)是普通選擇器溜腐。

1. 普通選擇器：mode = selector

// wxml
  <!-- 普通選擇器 -->
  <view class="picker-container">
    <text>普通選擇器(字符串?dāng)?shù)組數(shù)據(jù))：mode = selector</text>
    <picker class="picker" mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange" bindcancel="cancel">
      <view class="picker">
        當(dāng)前選擇：{{array[index]}}
      </view>
    </picker>
  </view>

  <view class="picker-container">
    <text>普通選擇器（對(duì)象數(shù)組數(shù)據(jù)）：mode = selector</text>
    <picker class="picker" mode="selector" range="{{objectArray}}" range-key="name" value="{{index}}" bindchange="bindPickerChange">
      <view class="picker">
        當(dāng)前選擇：{{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: ['蘋(píng)果', '橘子', '香蕉', '西紅柿'],  // 字符串?dāng)?shù)組
    index: 1,  // 默認(rèn)選中第幾行
    objectArray: [    // 對(duì)象數(shù)組
      { id: 0, name: '蘋(píng)果' },
      { id: 1, name: '橘子' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '西紅柿'}
    ],
 }望众，

  bindPickerChange: function (event) {
    console.log('picker發(fā)送選擇改變匪补，攜帶值為', event.detail.value)
    this.setData({
      index: event.detail.value
    })
  },
  cancel: function (event) {
    console.log("取消了");
  },

2. 普通選擇器：mode = multiSelector

// wxml
  <!-- 多列選擇器 -->
  <view class="picker-container">
    <text>多列選擇器(二維數(shù)組) ：mode = multiSelector</text>
    <picker class="picker" mode="multiSelector" range="{{multiArray}}" value="{{multiIndex}}" bindchange="multiBindchange">
      <view class="picker">
        當(dāng)前選擇：{{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: [['無(wú)脊柱動(dòng)物', '脊柱動(dòng)物'], ['扁性動(dòng)物', '線形動(dòng)物', '環(huán)節(jié)動(dòng)物', '軟體動(dòng)物', '節(jié)肢動(dòng)物'], ['豬肉絳蟲(chóng)', '吸血蟲(chóng)']],
    multiIndex: [0, 1, 2],
  },
  multiBindchange: function (event) {
    console.log('picker發(fā)送選擇改變曙砂，攜帶值為', 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. 時(shí)間選擇器：mode = time

// wxml
  <!-- 時(shí)間選擇器 -->
  <view class="picker-container">
    <text>時(shí)間選擇器：mode = time</text>
    <picker class="picker" mode="time" value="{{timeValue}}" start="{{start}}" end="{{end}}" bindchange="timeChange">
      <view class="picker">
        當(dāng)前選擇: {{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",  // 選中的時(shí)間
    start: "00:00", // 開(kāi)始時(shí)間
    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">
        當(dāng)前選擇: {{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",   // 日期選中時(shí)間
    dateStart: "2018-01-01",   // 日期開(kāi)始時(shí)間
    dateEnd: "2018-12-30",     // 日期結(jié)束時(shí)間
  },
  dateChange: function (event) {
    let date = event.detail.value;

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

5. 地區(qū)選擇器：mode = region

// wxml
  <!-- 省市區(qū)選擇器 -->
  <view class="picker-container">
    <text>省市區(qū)選擇器：mode = region</text>
    <picker class="picker" mode="region" value="{{regionValue}}" custom-item="{{custom}}" bindchange="regionChange">
      <view class="picker">
        當(dāng)前選擇: {{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: ["山東省","棗莊市","滕州市"],  // 默認(rèn)選中窒所，不填或者空，就默認(rèn)第一個(gè)
    custom : "全部",
},

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

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