微信小程序自定义picker组件

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番 *** 作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求.

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgod出，所以不用考虑父view的范围问题了。 

用框架做项目可以事半功倍，它封装好的各种功能免去你很大部分的工作。taro+taroui可以很好的实现开发一次，多端运行为目的的小程序。

Taro UI - Picker 选择器是从底部d起的滚动选择器，从官网给出的示例来看，通过onChange可以改变值，state的数据储存也是很简单的

state={selector:['美国','中国','巴西','日本']}

但是做项目的时候，数据的结构不可能那么简单，有时候是多层嵌套+多个条件选择，比如：

options数组里有3个对象，即要渲染出3个Picker选择器。

在当前js中，是无法在循环条件下渲染出来选择器的，就onChange触发的函数来说，就没法监听是由哪个对象改变的。

其实解决办法很简单，将选择器抽取出来为组件，父页面循环数组给子组件传递单个对象，这样渲染出来的每个选择器都是相互独立的，内调的onChange方法在子组件内部监听，也不会影响其他选项。

---