美文网首页微信小程序开发实战微信小程序小程序
自己动手写一个微信小程序地区选择器

自己动手写一个微信小程序地区选择器

作者: sesine | 来源:发表于2017-01-24 16:55 被阅读5023次

    微信小程序自带了时间选择器、日期选择器,但是没有地区选择器。

    于是只能撸代码撸了一个出来 GIthub传送门

    展现方式

    有两种方式可以选择:

    • picker 普通选择器方式(分成三个选项)

    • picker-view 滚动选择器方式(三个选项合并成一个)

    输出数据

    数据使用form表单进行提交,对各项内容进行了校验,以下条件通过才可提交(不过你可以自己改)

    • 各选项值不能为空

    • 姓名必须为中文名

    • 手机号码格式正确

    如果所有条件通过,会在console打印表单的数据,然后可以进行之后的操作

    输出的数据可以是中文的地区名称北京,也可以是地区编码 110000

    切换方法:在wxml页面文件中,{{provinceName[provinceSelIndex]}}为地区名称,如果改成{{provinceCode[provinceSelIndex]}}就是地区编号

    数据存在隐藏的input中(如果直接使用input会唤起键盘)


    这是效果图:

    posterposter

    如果喜欢的话,请star

    相关文章

      网友评论

      • blazer_iOS:小程序能不能根据字段来进行判断 显示不同的列表的cell
      • 5ec1da87f063:为何你的这个picker-view无法和其他单独的picker用,我文件里面还有其他的时间picker,一用的话你这个picker-view就失效了,单独用picker-view是好的..为什么?
        5ec1da87f063:@sesine 谢谢啊,不用了.我使用系统的地区选择器.
        sesine:你直接这么讲我也不清楚,有代码最好可以贴一下代码。
      • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布,我们会注明来源和作者姓名。

        非常感谢~~~
        sesine:@知晓程序 👌好的。

      本文标题:自己动手写一个微信小程序地区选择器

      本文链接:https://www.haomeiwen.com/subject/gygzbttx.html