wepy开发小程序实战之自定义地区选择器

小程序提供的地区选择器很方便  但是有时候我们需要自定义我们自己的业务逻辑，这个时候，就需要我们自己去写地区选择器

  小程序地区选择器如下

  

 <picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">

      <view class="picker">

        {{region[0]}}，{{region[1]}}，{{region[2]}}

      </view>

    </picker>

   只适合文字展示，但是如果需要根据地区id,去跑后台数据 明显不够，

  下面是本人自己写的地区选择器  只展示二级   因为业务只需要展示二级。

 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiCnAreaIndex}}" range="{{multiCnAreaArray}}" range-key="title">
            <view class="picker">
              <text>{{multiCnAreaArray[1][multiCnAreaIndex[1]].title}}</text>
              <text class="icon-triangledownfill"></text>
            </view>
          </picker>

后台取地区数据 

数据结构如下：

 "data": [
        {
            "id": "1",
            "parentId": "0",
            "title": "北京市",
            "areaLevel": 0,
            "area2TreeInfos": [
                {
                    "id": "2",
                    "parentId": "1",
                    "title": "直辖区",
                    "areaLevel": 1
                }
            ]
        },
        {
            "id": "7509",
            "parentId": "0",
            "title": "天津市",
            "areaLevel": 0,
            "area2TreeInfos": [
                {
                    "id": "7510",
                    "parentId": "7509",
                    "title": "直辖区",
                    "areaLevel": 1
                }
            ]
        }

]

 

js实现代码：

 methods = {
    //地区选择  点击确定 改变携带值
    bindMultiPickerChange(e) {
      console.log('zone.wpy bindMultiPickerChange..e.detail.value' + e.detail.value);
      let that = this;
      that.multiCnAreaIndex = e.detail.value;
      console.log('zone.wpy bindMultiPickerChange..that.multiCnAreaIndex' + that.multiCnAreaIndex);
      that.$apply();
    },
    //地区选择  选择地区
    bindMultiPickerColumnChange(e) {
      console.log('zone.wpy bindMultiPickerChange..e.detail.value' + e.detail.value);
      let that = this;
      let data = {
        multiCnAreaArray: that.multiCnAreaArray,
        multiCnAreaIndex: that.multiCnAreaIndex
      }
       console.log('zone.wpy bindMultiPickerChange.. let data' + data);
      //更新滑动的第几列e.detail.column的数组下标值e.detail.value
        console.log('zone.wpy bindMultiPickerChange.. e.detail.column' + e.detail.column);
      data.multiCnAreaIndex[e.detail.column] = e.detail.value;
      //如果更新的是第一列“省”，第二列“市”数组下标置为0
      if (e.detail.column == 0) {
        data.multiCnAreaIndex = [e.detail.value, 0];
      } else if (e.detail.column == 1) {
        //如果更新的是第二列“市”，第一列“省”的下标不变
        data.multiCnAreaIndex = [data.multiCnAreaIndex[0], e.detail.value];
      }
      if (that.cnArea) {
        let temp = that.cnArea;
        console.log('zone.wpy bindMultiPickerChange.. let temp' + temp);
        data.multiCnAreaArray[0] = temp;
        if ((temp[data.multiCnAreaIndex[0]].area2TreeInfos).length > 0) {
          //如果第二列“市”的个数大于0,通过multiCnAreaIndex变更multiCnAreaArray[1]的值
          data.multiCnAreaArray[1] = temp[data.multiCnAreaIndex[0]].area2TreeInfos;
          //如果第三列“区”的个数大于0,通过multiCnAreaIndex变更multiCnAreaArray[2]的值；否则赋值为空数组
        }
        that.multiCnAreaArray=data.multiCnAreaArray;
        that.multiCnAreaIndex=data.multiCnAreaIndex;
      }
      that.$apply();
    },
  }

 

实现效果如下：