微信小程序自定义三级联动城市列表

效果图:

image.png



WXML代码:

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray1}}" bindtap='ssss'>
<view class="picker" style='padding-left:20rpx;'>
{{asdf}} {{multiArray1[0][multiIndex[0]]}}{{multiArray1[1][multiIndex[1]]}}{{multiArray1[2][multiIndex[2]]}}
</view>
</picker>

Js代码

//省市区改变:
bindRegionChange: function (e) {
  var that = this;
  console.log(e)
  console.log('picker发送选择改变,携带值为', e.detail.value)
  that.setData({
    multiIndex:[0,0,0],
  })
  console.log(that.data.asdf)
},

//点击选择的时候
ssss:function(){
  var that = this;
  that.setData({
    asdf: '',
  })
},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  var that=this;
  var yshuzu=that.data.multiArray;
  
  var newone = [];//省 数列
  var newtwo = [];//市 数列
  var newthree = [];//区 数列
  // console.log(yshuzu.length)
  for (var i = 0; i < yshuzu.length;i++){
    newone.push(yshuzu[i].n)
  }
  for (var i = 0; i < yshuzu[0].c.length; i++) {
    newtwo.push(yshuzu[0].c[i].n)
  }
  for (var i = 0; i < yshuzu[0].c[0].a.length; i++) {
    newthree.push(yshuzu[0].c[0].a[i])
  }
  // console.log(yshuzu[0].c[0].a)
  var diyi=0;
  var di2 = 1;
  var di3 = 2;
  that.setData({
    multiArray1:[
      [diyi]= newone,
      [di2] = newtwo,
      [di3] = newthree
    ],
    shengfarray: newone,
    shiarray:newtwo,
    quarray:newthree,
  })

  // console.log(that.data.multiArray1)
},

//省市区选择器
bindMultiPickerChange: function (e) {
  var that = this;
  var shuzu = e.detail.value
  that.setData({
    multiIndex: shuzu
  })
  // console.log(shuzu)
},
// 滚动选择事件
bindMultiPickerColumnChange(e){
  var that=this;
  var dijixiang = e.detail.column;//第几项
  if(dijixiang!=2){

  
  var xz = e.detail.value;//选择第几项
  var yshuzu = that.data.multiArray;
  var newone = that.data.shengfarray;//省
  var newtwo = that.data.shiarray;//市
    var newthree = that.data.qu;;//区
  var sheng = that.data.sheng;
  var shi = that.data.shi;
  var qu = that.data.qu;
  var that = this;
    var multiIndex=that.data.multiIndex;

  if (dijixiang==0){
    //市
    newtwo=[];
    console.log(111111111111111111111111111)
    var shishuzu = yshuzu[xz].c;
    // console.log(yshuzu[xz - 1])
    // console.log(shishuzu)
    for (var i = 0; i < shishuzu.length; i++) {
      newtwo.push(shishuzu[i].n)
    }
   
    if (sheng!=xz){
      newthree = [];
      var disan = yshuzu[xz].c[0].a;
      for (var i = 0; i < disan.length; i++) {
        newthree.push(disan[i])
      }
      shi=0;
      multiIndex[0] = xz;
      multiIndex[1] = 0;
      multiIndex[2] = 0;
    }
    sheng=xz;
    
    // console.log(sheng)
  }
  if (dijixiang == 1) {
    //市
    var quxian = yshuzu[sheng].c;
    console.log(newtwo)
    newthree = [];
    var shishuzu = quxian[xz].a;
    // console.log(shishuzu)
    for (var i = 0; i < shishuzu.length; i++) {
      newthree.push(shishuzu[i])
    }
    multiIndex[0] = sheng;
    multiIndex[1] = xz;
    multiIndex[2] = 0;
    qu = xz;
  }
  var diyi = 0;
  var di2 = 1;
  var di3 = 2;
  that.setData({
    multiArray1: [
      [diyi] = newone,
      [di2] = newtwo,
      [di3] = newthree
    ], 
    sheng:sheng,
    shi:shi,
    qu:qu,
    shengfarray: newone,
    shiarray: newtwo,
    quarray: newthree,
    multiIndex: multiIndex,
  })
  }
  // console.log(e)
},

PAGEDATA

具体写法请看文件

create_address.zip


打赏

本文 暂无 评论

回复给

Top