微信小程序中的省市区选择器

微信小程序中的省市区选择器的实现

在一些小程序中我们不伐会用到市区选择器，那它是如何实现的，下面展示一下，效果图。

首先在wxml这个文件中用到picker这个组件，picker是从底部加载的滚动选择器。

<picker mode="region" bindchange="getUserProvince">
      <view>
        选择的省份:<text wx:for="{{region}}">{{item}} </text>
      </view>
</picker>

picker中加的mode属性确定picker是那中类型，有selector（普通选择器）、multiSelector（多列选择器）、date（日期选择器）、region（省市区选择器）。
这次用到的是region
在picker中有一个时间触发器叫做bindchange,这个触发器是当我们选择后触发的，后面是我自定义的一个函数，如果我想将数据展示到wxml页面上，下面展示一下js代码：
1.首先我们在data对象中设置一个命名为region的空数组

  data: {
         region:[]    //定义一个空数组用来存放选择地具体是哪一个省市区
    },

2.然后在page方法中写入我们自定义地函数：

 getUserProvince:function(e)
     {
        this.setData({
            region:e.detail.value     //将用户选择的省市区赋值给region
        })
     },

这样就可以实现了。