無聯動picker組件

省市區聯動這種插件應該不少人用過，在我第一次寫這種功能的時候，第一時間就是找插件，尤爲是移動端，對當時的我來講歷來沒有想過本身寫。

最近看了同事寫的省市區的組件，發現幾乎全部的picker組件都是根據手指移動距離來滑動，可是有個問題，就是我快速的滑動一下，組件是沒辦法像原生scroll同樣滑動一段距離。想要作這種效果想要計算手指在移動的那段時間內的速度，而後移動一段距離，就像一個小型的小引擎同樣。

因而本身就想，直接用原生的scroll同樣，快速滑動一下，可以自主的移動很長一段距離。原本想把聯動和不聯動的寫成一個組件，後來發現針對聯動和不聯動，對於數據處理會比較麻煩，對用起來的時候要專門處理成組件須要的數據格式麻煩了，因而把聯動和不聯動的分開來寫。

一樣的，先說明原理：

佈局「

僅支持最多5列，這邊採用float佈局，兼容性沒問題。每一列都可以scroll。每一列的高度都是40，上下各有兩個空白的li。

給每一列一個id，而後給每一列添加滾動監聽，在滾動結束的時候獲取scrollTop，而後把scrollTop變成40的整數倍。

滾動結束採用了節流的方法，也就是設定一個定時器去觸發滾動結束。

我這邊返回的是多少列就返回每一列的選中index，因此在改變選中狀態的時候先判斷當前是否跟以前選中的相同，不相同就改變選中index數組。

因爲手指在滑動期間要禁止滾動的定時器，因此在start的時候設定一個狀態，要是手指沒有end就不觸發scroll的定時器方法。

使用：

<w-pick :dataList="list"@confirm="confirm" @cancel="cancel" title="標題">

List的數據格式：

[ [{value: '第三列'},{value:'第三列'},{value: '第三列'}], [{value: '第三列'},{value:'第三列'},{value: '第三列'}], [{value: '第三列'},{value:'第三列'},{value: '第三列'}], [{value: '第三列'},{value:'第三列'},{value: '第三列'}], [{value: '第三列'},{value:'第三列'},{value: '第三列'}] ]

效果：

由於是本身用，但願想要使用的能夠研究透徹一下，這邊還有不少沒有實現，好比默認選中，每一列展現的數量等，有須要的能夠留言，不過仍是但願拷貝源碼而後本身改爲本身想要的。

已經發布npm：www.npmjs.com/package/wad…

歡迎關注Coding我的筆記 公衆號