微信小程序 自定义（省市县）数据

index.html

 

<view class="box" wx:if="{{boxShow}}">

    <!-- 阴影 -->

    <view class="black" bindtap="hidebox"></view>

    <!-- 内容 -->

    <view class="nr">

      <view class="item">

        <text bindtap="hidebox">取消</text>

        <text bindtap="confirm">确认</text>

      </view>

      <view style="display:flex;width: 100%;height: 400rpx;">

          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{pIndex}}" bindchange="changeProvince2">

              <picker-view-column>

                  <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 68rpx">{{item.label}}</view>

              </picker-view-column>

          </picker-view>

          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{cIndex}}" bindchange="changeCity2">

              <picker-view-column>

                  <view wx:for="{{placeArray[pIndex].children}}" wx:key="name" style="line-height: 50rpx">{{item.label}}</view>

              </picker-view-column>

          </picker-view>

          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{aIndex}}" bindchange="changeArea2">

              <picker-view-column wx:if="{{placeArray[pIndex].children[cIndex].children.length > 0}}">

                  <view wx:for="{{placeArray[pIndex].children[cIndex].children}}" wx:key="*this" style="line-height: 50rpx">{{item.label}}</view>

              </picker-view-column>

          </picker-view>

      </view>

    </view>

  </view>

index.css

.index{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  padding-top: 30rpx;
  box-sizing: border-box;
}
.input{
  width: 680rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #999;
  border-radius: 10rpx;
  margin: auto;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: 8;
}
.black{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}
.nr{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500rpx;
  z-index: 12;
  background: #FFF;
}
.item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #EEE;
}

index.js

newArr: [],

    multiIndex: [0,0],

    multiIds: [],

    boxShow: false,

    province:'',

    pVal: '',

    pIndex: 0,

    city:'',

    cVal: '',

    cIndex: 0,

    area: '',

    aVal: '',

    aIndex: 0, 

    placeArray: [] //数据

// 确认按钮

  confirm: function(){

    if(this.data.placeArray[this.data.pIndex].children[this.data.cIndex].children.length> 0){

      this.setData({

        boxShow: false,

        province: this.data.placeArray[this.data.pIndex].label,

        pVal: this.data.placeArray[this.data.pIndex].value,

        city: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].label,

        cVal: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].value,

        area: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].children[this.data.aIndex].label,

        aVal: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].children[this.data.aIndex].value

      })

    }else{

      this.setData({

        boxShow: false,

        province: this.data.placeArray[this.data.pIndex].label,

        pVal: this.data.placeArray[this.data.pIndex].value,

        city: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].label,

        cVal: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].value

      })

    }

  },

  //1111

  changeProvince2(e){

    const val = e.detail.value

    if(this.data.placeArray[val].children[0].children.length > 0){

      this.setData({

        pIndex: val,

        cIndex: 0,

        aIndex: 0,

        province: this.data.placeArray[val].label,

        pVal: this.data.placeArray[val].value,

        city: this.data.placeArray[val].children[0].label,

        cVal:  this.data.placeArray[val].children[0].value,

        area: this.data.placeArray[val].children[0].children[0].label,

        aVal: this.data.placeArray[val].children[0].children[0].value

      })

    }else{

      this.setData({

        pIndex: val,

        cIndex: 0,

        aIndex: 0,

        province: this.data.placeArray[val].label,

        pVal: this.data.placeArray[val].value,

        city: this.data.placeArray[val].children[0].label,

        cVal:  this.data.placeArray[val].children[0].value,

        area: '',

        aVal: ''

      })

    }

  },

 //222222

 changeCity2: function(e){

  const val = e.detail.value

  if(this.data.placeArray[this.data.pIndex].children[val].children.length > 0){

    this.setData({

      cIndex: val,

      aIndex: 0,

      city: this.data.placeArray[this.data.pIndex].children[val].label,

      cVal: this.data.placeArray[this.data.pIndex].children[val].value,

      area: this.data.placeArray[this.data.pIndex].children[val].children[0].label,

      aVal: this.data.placeArray[this.data.pIndex].children[val].children[0].value

    })

  }else{

    this.setData({

      cIndex: val,

      aIndex: 0,

      city: this.data.placeArray[this.data.pIndex].children[val].label,

      cVal: this.data.placeArray[this.data.pIndex].children[val].value,

      area: '',

      aVal: ''

    })

  }

},

//3333

changeArea2: function(e){

  const val = e.detail.value

  this.setData({

    aIndex: val,

    area: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].children[val].label,

    aVal: this.data.placeArray[this.data.pIndex].children[this.data.cIndex].children[val].value

  })

},