脚本宝典收集整理的这篇文章主要介绍了

微信小程序picker实现的省市区三级联动

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix...

案例中用到的省市区的json文件在文后发出出来。

废话不多说,来看看具体地实现吧。

视图view

<picker class="placeholder" mode="multiSelector" 
bindchange="func_changeCitysChange" 
bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}">
  <view class="picker">请选择</view>
</picker>

JS代码

var arrays = common.getAreaInfo();//在头部引入 省市区地址js,这里封装成了方法了。

data:

data: {    

    citysIndex: [0, 0, 0], //给一个初始值索引,因为有三列,所以30

  },

onLoad:

onLoad: function(options) {
    var that = this;
    if (wx.getStorageSync('global_cityData')) {
      var cityArray = wx.getStorageSync('global_cityData');
    } else {
      //定义三列空数组
      var cityArray = [
        [],
        [],
        [],
      ];
      for (let i = 0, len = arrays.length; i < len; i++) {
        switch (arrays[i]['level']) {
          case 1:
            //第一列
            cityArray[0].push(arrays[i]["name"]);
            break;
          case 2:
            //第二列(默认由第一列第一个关联)
            if (arrays[i]['sheng'] == arrays[0]['sheng']) {
              cityArray[1].push(arrays[i]["name"]);
            }
            break;
          case 3:
            //第三列(默认第一列第一个、第二列第一个关联)
            if (arrays[i]['sheng'] == arrays[0]['sheng'] && arrays[i]['di'] == arrays[1]['di']) {
              cityArray[2].push(arrays[i]["name"]);
            }
            break;
        }
      }
      wx.setStorageSync('global_cityData', cityArray);
    }

    that.setData({
      cityArray: cityArray
    });
  },

下面就是两个事件了


func_changeCitysChange: function(e) {
    var that = this;
    var cityArray = that.data.cityArray;

    var address='';
    if (that.data.ssq == undefined){
      //下面方法中没有设置ssq,应该给它默认值 ,此时citysIndex相当于[0,0,0]
      var citysIndex = that.data.citysIndex;
      for (let i in citysIndex) {
        address += cityArray[i][citysIndex[i]]
      }
    }else{
      address = that.data.ssq;
    }

    wx.showModal({
      title: '',
      content: address+'',
    })
  },
  func_changeCitysChangeColumn: function(e) {
    var that = this;
    var cityArray = that.data.cityArray;

    var list1 = []; //存放第二列数据,即市的列
    var list2 = []; //存放第三列数据,即区的列
    
    var citysIndex = [];
    //主要是注意地址文件中的字段关系,省、市、区关联的字段有 sheng、di、level
    switch (e.detail.column) {
      case 0:
        //滑动左列
        for (let i = 0, len = arrays.length; i < len; i++) {          
          if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
            var sheng = arrays[i]['sheng'];
          }
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
            list1.push(arrays[i]['name']);
          }
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == arrays[1]['di']) {
            list2.push(arrays[i]['name']);
          }
        }       
        

        citysIndex = [e.detail.value, 0, 0];
        var ssq = cityArray[0][e.detail.value] + list1[0] + list2[0]+'';          

        that.setData({
          global_sheng: sheng
        });  
        break;
      case 1:
        //滑动中列
        var  di;
        var sheng = that.data.global_sheng;
        list1 = cityArray[1];
        for (let i = 0, len = arrays.length; i < len; i++) {     
          if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
            di = arrays[i]['di'];
          }         
        } 
        for (let i = 0, len = arrays.length; i < len; i++) {
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
            list2.push(arrays[i]['name']);
          }
        }
        citysIndex = [that.data.citysIndex[0], e.detail.value, 0];
        
        var ssq = cityArray[0][that.data.citysIndex[0]] + list1[e.detail.value] + list2[0] + '';

        break;
      case 2:
        //滑动右列
        list1 = cityArray[1];
        list2 = cityArray[2];
        citysIndex = [that.data.citysIndex[0], that.data.citysIndex[1], e.detail.value];

        var ssq = cityArray[0][that.data.citysIndex[0]] + list1[that.data.citysIndex[1]] + list2[e.detail.value] + '';
        break;
    }

    that.setData({
      "cityArray[1]": list1,//重新赋值中列数组,即联动了市
      "cityArray[2]": list2,//重新赋值右列数组,即联动了区
      citysIndex: citysIndex,//更新索引
      ssq: ssq,//获取选中的省市区
    });
  },

用到的省市区js文件,点下面链接。

省市区js文件,点击查看,提取码: xy6v

图片示例

小程序省市区联动

总结

以上是脚本宝典为你收集整理的

微信小程序picker实现的省市区三级联动

全部内容,希望文章能够帮你解决

微信小程序picker实现的省市区三级联动

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过