基于better-scroll的picker组件实现

这里再安利一下better-scroll这个组件库，该库的源代码结构清晰，借鉴了vue源码的组织形式。better-scroll提供的各功能模块相互独立，易于阅读，对初学者非常友好，建议学习一下。
另外，我们可以借助better-scroll提供的功能封装出更为复杂的组件。这里要说的picker选择器组件就是基于better-scroll提供的特性实现的。

实现原理

这里主要借助better-scroll提供的wheel属性，利用该属性并配合相应的html结构以及css样式可以很简单的实现选择器组件。

以上代码实现的效果图如下所示，第一行即为当前选中的选项，我们接下来要做的事情就是给选中的选项设计样式。

image

样式设计

以上代码实现的效果如下图所示，这里只给出了简单的原理以及演示，具体实现可根据自己的实际情况设计。

image

扩展

这里只演示了单列选择器组件，相对来说简单，我们在开发时常遇到的情形是多列的情况，再复杂就是各列存在联动关系。至于多列的设计，这里只需要创建多个better-scroll的实例即可。若存在多列联动的情形，需要根据滚动情况动态的输入相应了list，这里不再对详细设计做赘述。

总结

基于better-scroll还可以设计出很多复杂实用的组件，在后续会不断总结。。。。。