无联动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我的笔记 公众号