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

最新推荐文章于 2024-03-18 18:27:17 发布

HXH_csdn

最新推荐文章于 2024-03-18 18:27:17 发布

阅读量907

点赞数

文章标签：自定义省市区选择器小程序自定义省市区选择器

本文链接：https://blog.csdn.net/HXH_csdn/article/details/103387252

版权

HTML

<view class='input-box'>
    <view class='tittle'>省市区</view>
    <view class='input-shuru flex-between'>
      <!-- <input placeholder='请输入' placeholder-class='pl-class'></input> -->
      <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);
  },