微信小程序開發筆記（1.1）滾動選擇器picker的使用

前言

最近被拉來做小程序，因爲時間比較趕，其他方面只能放一放了。也沒辦法很系統地去學習，只能是以功能爲導向，需要實現什麼功能就去一步步學習做法，同時記錄一下學習過程。

今天實現的是一個很簡單的功能：對各省市歷年分數線的查詢，如圖所示

這個功能其實很簡單：用戶選擇相應的條件後，點擊 “查詢” ，然後將查詢的結果展示出來即可。

主要涉及了三個部分：

滾動選擇器picker
單項選擇框radio-group
對雲端數據的讀取與顯示

分別用三篇博客來講述。今天講的是滾動選擇器picker。

滾動選擇器picker

先來看官方文檔的描述。

網址：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

以上是picker的通用屬性，沒什麼好說的，主要講一下mode屬性。

選擇器一共有五種：

普通選擇器

普通的選擇器也就是我們要用的單列選擇器，只有一列選項可以選擇

如何配置這個普通選擇器呢？除了picker的通用屬性以外，不同的選擇器也有不同的屬性。

range：你所提供的選項集合。它可以是一個數組，也可以是一個對象數組。
value：當前選中的選項的下標
bindchange：value值改變後觸發的事件，就是用戶滑到其他選項並點擊 “確定” 後所觸發的事件
range-key：如果你提供的選項是隻是一個數組，普通選擇器自然顯示的是數組中的內容。但是如果你提供的是對象數組(objectArray)，而你想展示的只是對象的某個屬性(objectArray.name)，因此還需要設置range-key值來選擇你想展示的屬性。

注：書寫時 range = "{{ ‘屬性字段’ }} "。要將屬性字段加上單引號纔有效。

在 js 界面準備好數據後，在wxml界面配置選擇器，並進行數據綁定。

<view class="section">
  <!--range:array-->
  <view class="section__title">普通選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      當前選擇：{{array[index]}}
    </view>
  </picker>
</view>
<!--range:objectArray-->
<view class="section">
  <view class="section__title">普通選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key="{{'name'}}">
    <view class="picker">
      當前選擇：{{objectArray[index].name}}
    </view>
  </picker>
</view>

js界面準備的數據（放在data中），以及bindchange所綁定的事件

Page({
  data: {
    array: ['美國', '中國', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美國'
      },
      {
        id: 1,
        name: '中國'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

注：這是微信開放文檔的示例代碼，在剛剛給的網址中可以找到，下面的示範就不復制粘貼了。

多列選擇器

多列選擇器即有多個列的選項可以選擇

依舊來看一下多列選擇器可以配置的屬性

前面四個屬性和普通選擇器沒有區別。
bindcolumnchange：所選擇的列的值發生改變時觸發的事件

注：與bindchange不同的是，bindchange是點擊 “確定” 後纔會觸發。而bindcolumnchange是隻要列的值一發生變化就觸發。

例如，將第一列滑到 “脊柱動物” 後就會立刻觸發bindcolumnchange所綁定的事件，再將它滑回 “無脊柱動物” 又會觸發一次。但是隻要不點擊 “確定” ，bindchange是不會觸發的。

多項選擇器雖然只多了一個屬性，但是比單項選擇器複雜得多，主要是因爲多項選擇器中，前後列可能存在着關聯，需要隨時變化。

我們先來看前後列沒關係的例子。

對於第一列來說，每一級都會對應 [‘上學期’,‘下學期’] 和 [‘1班’,‘2班’,‘3班’]。也就是說，每一列值發生變化不影響其他列的值。因此數據是不需要變化的，初始設置好就行了。

 classArray: [['2016級','2017級','2018級','2019級'],['上學期','下學期'],['1班','2班','3班']],
 classIndex: [0,0,0]

下面來看一下前後列有關係的例子，也就是官方文檔中給出的例子

在這個例子中，第一列的選項發生變化後，第二、第三列的選項也要發生變化，第二列的選項發生變化後，第三列的選項也要發生變化。這就是一個三級級聯的選擇器。

要實現這個功能，關鍵就是在bindcolumnchange事件被調用的時候，對相應數組的值進行修改。

首先，第一列提供的選項是 [‘無脊柱動物’, ‘脊柱動物’] , 因爲第一列默認先選擇的是 ‘無脊柱動物’ ，因此第二列要提供的選項是 [‘扁形動物’, ‘線形動物’, ‘環節動物’, ‘軟體動物’, ‘節肢動物’] 。因爲第二列默認先選擇的是 ’ 扁形動物’ ，因此第三列要提供的選項是 [‘豬肉絛蟲’, ‘吸血蟲’] 。這就組成了初始的數據數組。

multiArray: [['無脊柱動物', '脊柱動物'], ['扁形動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絛蟲', '吸血蟲']]

現在，假設用戶將第二列的選項滑動到 ‘環節動物’，那麼第三列的數據就應該改爲 [‘螞蟻’, ‘螞蟥’]。修改後的數組如下。

multiArray: [['無脊柱動物', '脊柱動物'], ['扁形動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['螞蟻', '螞蟥']]

現在，假設用戶將第一列的選項滑到 ‘脊柱動物’，那麼第二列的數據就應該改爲 [‘魚’, ‘兩棲動物’, ‘爬行動物’]。因爲此時第二列默認會選擇的是 ‘魚’ ，因此第三列要提供的選項是 [‘鯽魚’, ‘帶魚’] 。修改後的數組如下。

multiArray: [['無脊柱動物', '脊柱動物'], ['魚', '兩棲動物', '爬行動物'], ['鯽魚', '帶魚']]

現在，假設用戶將第二列的選項滑動到 ‘兩棲動物’，那麼第三列的數據就應該改爲 [‘青蛙’, ‘娃娃魚’]。修改後的數組如下。

multiArray: [['無脊柱動物', '脊柱動物'], ['魚', '兩棲動物', '爬行動物'], ['青蛙', '娃娃魚']]

也就是說，第二列的選項變化的時候，要修改第三列的數組數據。第一列選項變化的時候，要修改第二列的數組數據，又因爲第二列的選項也被改變了，同時也要修改第三列的數組數據。那麼怎麼在bindcolumnchange事件中實現呢？

在這個事件中，可以得到被修改的列(e.detail.column)，和修改後的值(e.detail.value)

console.log('修改的列爲', e.detail.column, '，值爲', e.detail.value);

首先判斷被修改的列，假如是第一列的話，multiArray其實只有兩種情況：

第一列選擇無脊柱動物，根據無脊柱動物配置第二列；第二列默認選擇扁形動物，根據扁形動物配置第三列
第一列選擇脊柱動物，根據脊柱動物配置第二列；第二列默認選擇魚，根據魚配置第三列

//第一個選項
multiArray: [['無脊柱動物', '脊柱動物'], ['扁形動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絛蟲', '吸血蟲']]
//第二個選項
multiArray: [['無脊柱動物', '脊柱動物'], ['魚', '兩棲動物', '爬行動物'], ['鯽魚', '帶魚']]

代碼：

    //先判斷修改的列
    switch (e.detail.column){
      //第一列
      case 0:
        //再判斷修改後的值
        switch (e.detail.value){
          case 0:
            data.multiArray = [['無脊柱動物', '脊柱動物'], ['扁形動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絛蟲', '吸血蟲']];
            break;
          case 1:
            data.multiArray = [['無脊柱動物', '脊柱動物'], ['魚', '兩棲動物', '爬行動物'], ['鯽魚', '帶魚']];
            break;
        }
        break;
    }

假如是第二列，因爲不知道這時候選中的第一列是哪一個選項（每一個選項對應的第二列的數據不同），我們只知道第二列的值被修改了。例如從第二個選項滑到了第一個選項，但是無法確定第一個選項到底是 ‘扁形動物’ 還是 ‘魚’ 。

因此首先要判斷第一列的選項值，再判斷第二列修改後的值，才能修改第三列的數據。

 	  //第二列
      case 1:
        //先判斷第一列是哪個選項
        switch (data.multiIndex[0]){
          //第一個選項
          case 0:
            //判斷修改後的值
            switch (e.detail.value){
              //修改第三列的數據
              case 0:
                data.multiArray[2] = ['豬肉絛蟲', '吸血蟲'];
                break;
              case 1:
                data.multiArray[2] = ['蛔蟲'];
                break;
              case 2:
                data.multiArray[2] = ['螞蟻', '螞蟥'];
                break;
              case 3:
                data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];
                break;
              case 4:
                data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物'];
                break;
            }
            break;
          
          //第二個選項
          case 1:
            //判斷修改後的值
            switch (e.detail.value){
              //修改第三列的數據
              case 0:
                data.multiArray[2] = ['鯽魚', '帶魚'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃魚'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龜', '壁虎'];
                break;
            }
            break;
        }
        break;

時間選擇器

屬性：

value：當前所選中的時間，格式是"hh:mm"。
start：有效時間範圍的開始，格式是"hh:mm"。

注：這個“有效時間範圍”，指的是用戶可以選擇的時間範圍。但是在提供的選項上並不只在這個範圍內。例如，設置有效時間範圍的開始爲"06:00"，選項上仍然會有"05:00",“04:00”…"00:00"可以選，只是選中之後又會滾回“06:00”而已。
end：有效時間範圍的結束，格式是“hh:mm”。同上。
bindchange： value值改變後觸發的事件，就是用戶滑到其他選項並點擊 “確定” 後所觸發的事件。

日期選擇器

屬性：

其他部分和時間選擇器差別不大，主要講一下fields屬性。

fields：表示選擇器的粒度。這個 “粒度” 指的就是所提供選項的精細程度。也就是說，假如設置的是 “year” ，那麼就只有年份可以選，假如設置的是 “month”，就有年份和月份可以選，假如設置的是 “day”，就有年月日可以選。

省市區選擇器

微信小程序內置的省市區選擇器，不需要自己準備數據，直接調用即可（可以設置初值）。

屬性：

value：表示選中的省市區，格式爲 [‘xx省’, ‘xx市’, ‘xx區’]。
custom-item：可以爲每一列的頂部添加一個自定義的選項。

注：只能添加一項。如果連續設置，只顯示最後的設置
```
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="全部" custom-item="其他">
```
bindchange：value值改變後發生的事件。通過event.detail.value可以獲取到改變後的省市區的值

注：雖然文檔中還寫了可以用code讀取到統計用區劃代碼，posecode讀取到郵政編碼，但是實際輸出的時候不知道爲啥讀取不到。

微信內置的省市區選擇器雖然設置起來很方便，但是官方沒有公開具體的省市區數據，在實際的項目中只能讀取到用戶所選擇的省市區而已，功能不是很完善。如果有需要，可以用多項選擇器來自己製作一個。

微信小程序開發筆記（1.1）滾動選擇器picker的使用