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

index.html

{boxShow}}">

        取消

        确认

          {pIndex}}" bindchange="changeProvince2">

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

          {cIndex}}" bindchange="changeCity2">

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

          {aIndex}}" bindchange="changeArea2">

              {placeArray[pIndex].children[cIndex].children.length > 0}}">

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

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

  })

},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！