美文网首页让前端飞
小程序开发笔记《四》picker回显之省市二级联动

小程序开发笔记《四》picker回显之省市二级联动

作者: 菜菜___ | 来源:发表于2020-06-01 16:25 被阅读0次

    上篇文章介绍了小程序自定义省市二级联动选择器,但是当用户保存省市信息后再次进入页面,需要将选择器回显,这篇文章主要讲述自定义选择器回显。

    实现思路:
    通过后台返回的省份编码,获取该省份在省份列表数组的下标值,并根据省份编码拿到该省份下的市级列表,并把市级列表放入picker的range属性对应数组的第二列,然后根据后台返回的市级编码获取该市级在市级列表数组的下标值,拿到这两个下标值存入数组中然后赋值给picker的value属性,就实现啦~
    js代码:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        province_code:"",
        city_code:"",
        provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],
        multiIndex: [0, 0],
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        /**根据服务器请求返回值赋值给data,这里方便演示默认写死 */
        this.setData({
          province_code:"420000",
          city_code:"421000"
        })
        var data = {
          provinceCityArray: this.data.provinceCityArray   
        };
        var multiIndexArray = [];
        //获取当前省在所有省数组中的下标
        for (var i = 0; i < data.provinceCityArray[0].length; i++) {
          if (this.data.province_code == data.provinceCityArray[0][i].area_code) {
            multiIndexArray[0] = i;
            break;
          }
        }
        var cityArray = provinceCity.getCityListByProvince(this.data.province_code);
     
       //获取当前市在当前省所有市cityArray数组中的下标
        for (var i = 0; i < cityArray.length; i++) {
          if (this.data.city_code == cityArray[i].area_code) {
            //根据当前市编码去匹配
            multiIndexArray[1] = i;
            break;
          }
        }
        data.provinceCityArray[1] = cityArray;
        this.setData({
          multiIndex: multiIndexArray,
          provinceCityArray: data.provinceCityArray
        })
    
      }
    })
    

    其他部分的实现可参考上一篇文章:小程序开发笔记《三》自定义省市二级联动


    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

    相关文章

      网友评论

        本文标题:小程序开发笔记《四》picker回显之省市二级联动

        本文链接:https://www.haomeiwen.com/subject/wqdnohtx.html