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

JavaScript024

微信小程序实现地址选择组件,第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

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