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

JavaScript019

微信小程序实现地址选择组件,第1张

小程序官网关于picker的介绍

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

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

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

index.wxml

index.js

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

不知微信上哪个模块有这个地址选择，我暂时没发现，就说下我用的那个原理吧，界面是这样的:

首先数据源是通过解析全国地址信息的xml文件（国家测绘局下载的）得到的，分别封装获取了省市县三级集合信息，每项点击打开是一个listView，特别注意当用户点击了某一具体的省时，要同步跟新界面中其市（任选一个）和该市的县的集合即可。

参考文档：

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

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