小程序自定义省市区选择器

怼烎@ 2023-06-19 04:21 1阅读 0赞

1.  HTML

<view class='input-box'>
        <view class='tittle'>省市区</view>
        <view class='input-shuru flex-between'>
          
          <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{ {multiIndex}}" range="{ {multiArray}}" range-key="name">
            <view class="picker">
              { { multiArray[0][multiIndex[0]].name}}，{ { multiArray[1][multiIndex[1]].name}},{ { multiArray[2][multiIndex[2]].name}}
            </view>
          </picker>
          <image src='/images/icon/home_02.jpg'></image>
        </view> 
      </view>

2 . js

multiArray: [],   //省市区数组
      multiIndex: [0, 0, 0]//省市区下标
    
      that.setData({ 
        provinces: temp,
        multiArray: [temp, temp[0].child, temp[0].child[0].child],
      })
    
      // 城市选择
      bindMultiPickerChange: function (e) { 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({ 
          multiIndex: e.detail.value
        })
      },
      //滑动
      bindMultiPickerColumnChange: function (e) { 
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        var data = { 
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        //更新滑动的第几列e.detail.column的数组下标值e.detail.value
        data.multiIndex[e.detail.column] = e.detail.value;
        //如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0
        if (e.detail.column == 0) { 
          data.multiIndex = [e.detail.value, 0, 0];
        } else if (e.detail.column == 1) { 
          //如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
          data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
        } else if (e.detail.column == 2) { 
          //如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
          data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
        }
        var temp = this.data.provinces;
        data.multiArray[0] = temp;
        if ((temp[data.multiIndex[0]].city).length > 0) { 
          //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
          data.multiArray[1] = temp[data.multiIndex[0]].city;
          var areaArr = (temp[data.multiIndex[0]].city[data.multiIndex[1]]).area;
          //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值；否则赋值为空数组
          data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
        } else { 
          //如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
          data.multiArray[1] = [];
          data.multiArray[2] = [];
        }
        //data.multiArray = [temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];
        //setData更新数据
        this.setData(data);
      },