自從上一篇文章：微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問題分析 出來以后，有人私聊我說能不能從頭分析一下我開源的自定義組件？一直沒時(shí)間。這不，最近項(xiàng)目中有個(gè)需求是 省市區(qū)三級(jí)聯(lián)動(dòng) ，我就順便從組件庫中的第一個(gè) 「擴(kuò)展日期-時(shí)間picker（點(diǎn)此直接至GitHub，歡迎star）」組件開始說一下這兩個(gè)功能的實(shí)現(xiàn)。

---

簡(jiǎn)單說一下“自定義日期-時(shí)間組件”

它的背景是項(xiàng)目的第一版當(dāng)時(shí)發(fā)現(xiàn)微信小程序內(nèi)置的日期組件：picker只能精確到某一天（年月日），但是我們很多時(shí)候需要年月日時(shí)分甚至是年月日時(shí)分秒（如結(jié)束時(shí)間/發(fā)布時(shí)間）。

筆者仔細(xì)翻閱了官方文檔和許多博主文章發(fā)現(xiàn)提出了各種各樣的解決方案（但很遺憾沒發(fā)現(xiàn)有博主詳細(xì)公開代碼），但是對(duì)于這樣一個(gè)其實(shí)并不需要“聯(lián)動(dòng)”、列數(shù)也不固定的功能，用多列picker模擬多列選擇器 即可。

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
	<input value='{{time}}' readonly="" disabled="true" placeholder='{{defaulttext}}' />
</picker>

其中 readonly="" disabled="true" 的作用是使“input聚焦時(shí)軟鍵盤不彈出”（兩個(gè)屬性作用一樣，都寫是因?yàn)锳ndroid和iOS的兼容性問題）。

用input代替view是因?yàn)閕nput的placeholder方便實(shí)現(xiàn)“無選中時(shí)默認(rèn)提示”的效果。

主要實(shí)現(xiàn)策略

如上所示，監(jiān)聽了兩個(gè)事件，分別是：日期選擇窗口彈出時(shí)以及點(diǎn)擊“確定”按鈕時(shí)觸發(fā)函數(shù)change、多列選擇器中每一列滑動(dòng)時(shí)觸發(fā)事件columnchange。

1. change中很簡(jiǎn)單：只需要把選中的數(shù)據(jù)暴露給頁面中（或者通過 triggerEvent 返回給調(diào)用頁面）即可；
2. columnchange中要做的就是當(dāng)前選中的每一列的值填充到data中對(duì)應(yīng)數(shù)組的某一項(xiàng)。比如：e.detail.column==1 時(shí)表示當(dāng)前滑動(dòng)的是第二列（月份），此時(shí)需要判斷的是每一月有幾天：

if (e.detail.column == 1) {
     let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
     let temp = [];
     if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判斷31天的月份
       for (let i = 1; i <= 31; i++) {
         if (i < 10) {
           i = "0" + i;
         }
         temp.push("" + i);
       }
       this.setData({
         ['multiArray[2]']: temp   //第三列天數(shù)更新（根據(jù)月份）
       });
    }
}

注意： 多列picker組件監(jiān)聽兩個(gè)參數(shù)：multiArray和multiIndex，他們都是數(shù)組！
multiArray主要用來表示監(jiān)聽?zhēng)琢?#xff0c;其元素都是一個(gè)個(gè)數(shù)組，如：[years, months, days, hours, minutes]
multiIndex是當(dāng)前每一列（點(diǎn)開時(shí)的）初始值！如：[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
一般來說，multiIndex中的值也被用來當(dāng)做取multiArray中元素時(shí)的第二個(gè)索引！

---

說說省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)

先將城市列表文件發(fā)出來：（永久免費(fèi)下載）

鏈接提取碼https://pan.baidu.com/s/1z4ZfOWnAG2zVaGfxXxpF9Qj3m3

使用時(shí)按如下引入即可：（是一個(gè)citysearch.js文件）

import placeArrays from 'citysearch文件路徑';
const placeArray=placeArrays.placeArray

正式開始

不知大家有沒有使用過，或聽過小程序的 picker-view 組件，其定位就是：嵌入頁面的滾動(dòng)選擇器。
它有三個(gè)參數(shù)：

參數(shù)類型說明valueNumber Array數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(xiàng)（下標(biāo)從 0 開始），數(shù)字大于 picker-view-column 可選項(xiàng)長度時(shí)，選擇最后一項(xiàng)。indicator-styleString設(shè)置選擇器中間選中框的樣式bindchangeEventHandle當(dāng)滾動(dòng)選擇，value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value} value為數(shù)組，表示 picker-view 內(nèi)的 picker-view-column 當(dāng)前選擇的是第幾項(xiàng)（下標(biāo)從 0 開始）

需要注意的是：其中只可放置<picker-view-column/>組件，其他節(jié)點(diǎn)不會(huì)顯示，其孩子節(jié)點(diǎn)的高度會(huì)自動(dòng)設(shè)置成與picker-view的選中框的高度一致。

有了這個(gè)組件，我們是不是能想到：在一個(gè)彈出view中設(shè)置三個(gè)picker-view組件，每個(gè)組件中放一個(gè)picker-view-column組件用于展示當(dāng)前列？

value的初始值也可以只放一個(gè)number（比如0），picker-view會(huì)自動(dòng)將其轉(zhuǎn)為 [0]。但以后操作value必須用數(shù)組形式，否則picker-view組件不認(rèn)

就像這樣：

<view style="width:100%;position:fixed;bottom:0;left:0;z-index:10000;height:500rpx;background-color:white">
  <!-- 仿原生picker的“確定”和“取消”按鈕 -->
  <view style="display:flex;width:100%;height:100%">
    <view
      style="position: absolute;top:0;width:100%;height:100rpx;z-index:1000000;display:flex;justify-content:space-between;align-items:center;">
      <view style="width:calc(100% / 3);text-align:center;color:rgba(0,0,0,.6);font-size:39rpx" bindtap="displayer">取消
      </view>
      <view style="width:calc(100% / 3);text-align:center;color:rgb(63,142,255);font-size:39rpx" bindtap="confirm">確定
      </view>
    </view>
    
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{pIndex}}"
      bindchange="changeProvince">
      <picker-view-column>
        <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 77rpx">{{item.name}}</view>
      </picker-view-column>
    </picker-view>
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{cIndex}}"
      bindchange="changeCity">
      <picker-view-column>
        <view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 77rpx">{{item.name}}</view>
      </picker-view-column>
    </picker-view>
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{aIndex}}"
      bindchange="changeArea">
      <picker-view-column>
        <view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 77rpx">{{item}}
        </view>
      </picker-view-column>
    </picker-view>
    
  </view>
</view>

可以看到，每一個(gè)picker-view-column中做的唯一一件事就是：遍歷固定的某一列（某一個(gè)數(shù)組）并渲染出來。

// js-data
data:{
	placeArray: placeArray,
    province: placeArray[0].name, //- 省
    pIndex: 0,
    city: placeArray[0].city[0].name, //- 市
    cIndex: 0,
    area: placeArray[0].city[0].area[0], //- 區(qū)
    aIndex: 0,
}

然后如上wxml中為每一列（picker-view）都綁定了一個(gè)change函數(shù)——滑動(dòng)時(shí)觸發(fā)：

changeProvince: function(e){
  const val = e.detail.value   //這些val都是數(shù)組形式的了
  this.setData({
    pIndex: val,
    cIndex: 0,
    aIndex: 0,
    province: placeArray[val].name,
    city: placeArray[val].city[0].name,
    area: placeArray[val].city[0].area[0]
  })
},
changeCity: function(e){
  const val = e.detail.value
  this.setData({
    cIndex: val,
    aIndex: 0,
    city: placeArray[this.data.pIndex].city[val].name,
    area: placeArray[this.data.pIndex].city[val].area[0]
  })
},
changeArea: function(e){
  const val = e.detail.value
  this.setData({
    aIndex: val,
    area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
  })
},

他們的作用就是把當(dāng)前選擇列的選中元素（出現(xiàn)在indicator-style視野中的元素）暴露到頁面上，并將下標(biāo)定位到這里 —— 以便在頁面無刷新下的下一次點(diǎn)開時(shí)從這里開始找！
最重要的一點(diǎn)就是：在滑動(dòng)停止時(shí)，將另外兩列的數(shù)據(jù)重新定位到第一個(gè)！


——當(dāng)然，你也可以選擇在一個(gè)picker-view中放置多個(gè)picker-view-column組件，這樣的話就和上面多列picker一樣，需要多個(gè)數(shù)組聯(lián)動(dòng)來傳遞數(shù)據(jù)了！

行舟客 CSDN認(rèn)證博客專家 ECMAScript 6 Node.js CSS 江湖人稱“云小夢(mèng)”。一個(gè)大前端路上還未“畢業(yè)”的“小學(xué)生”。愛好分享、執(zhí)著探索、樂于開源；曾參與過中大型微信小程序項(xiàng)目前端開發(fā)，并主導(dǎo)過一些官網(wǎng)和個(gè)人網(wǎng)站開發(fā)；目前著迷于vue、node、css以及原生js技術(shù)。開源并維護(hù)有：微信小程序擴(kuò)展組件庫—— https://github.com/1314mxc/yunUI ，歡迎star！ 也曾開源過純前端在線圖片處理工具—— https://github.com/1314mxc/compress ，歡迎體驗(yàn)！