小程序picker多列滚动使用注意事项

最近公司开发的小程序中，用到了小程祥孝神序的picker组件，写了个二级级联动（三级联动同理）。慎返从页面上看，明显数据已经是加载上去了，而且也确实是正确的

从这张图上可以看到，明明第二列的数组已经设置是长度为一个，但是在谨亏页面上，却显示了两个。

排查下来，就是文本中，name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候，就不会有问题了。

封装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的范围问题了。 

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml

js

效果

普通选择器

多列滚纤选择器

时分秒（时间选择器）

年月日 日期选择器

省市选择器

传值问题：

微信小程序picker选择器传值

以最简单的普通培缺选择器为例

wxml

js

wxss

array: ['工作', '放假', '加班', '大中仿调休'],对应的int值分别是0,1,2,3

在实际使用中

例子

微信小程序提交form表单内容

wxml

js

css

点击完成的时候，将所有填写的值传给后端

---