微信小程序实现地址选择组件

小程序官网关于picker的介绍

小程序官网提供了5中选择器，分别是：

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

以下仅列举省市区选择器的用法：

index.wxml

index.js

多看文档，不然又要自己封装了。。。

参考文档：

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

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

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

---