省市區聯動這種外掛應該很多人用過，在我第一次寫這種功能的時候，第一時間就是找外掛，尤其是移動端，對當時的我來說從來沒有想過自己寫。
最近看了同事寫的省市區的元件，發現幾乎所有的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個人筆記 公眾號