• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序--三级联动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序--三级联动

最近做的项目中需要添加三级联动,选择所在地,而其中三级联动是自定义的,所以选择多列选择器。

小程序关于picker的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

效果图:

 

 

 

 

关于wxml页面很简单,就一行代码,相关的属性可以看文档来自己定义,这里简单说明一下是如何渲染的,以及渲染过程中出现的问题。

wxml:

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"  range="{{multiArray}}">
   <view>
     {{multiSelect}}
   </view>
</picker>

通过接口返回的数据结构如下图:

如此可见返回的是对象,需要转换成数组才可在页面上渲染

因为后期会多次用到对象转换为数组,将此封装为一个函数

js:

  //将js对象变为数组--三级联动
  toArr(object) {  //object要遍历的对象   name--我需要的数据,可自定义
    var arr = [];//返回的数组
    for (var i in object) {
      arr.push(object[i].name); //属性
    }
    return  arr;
  }

在转换数组的过程中,需要找到相应的某一项下面的所有数据,所以在此基础上添加查找某一项的功能

js:

  //将js对象变为数组--三级联动
  toArr(object, findItem) {  //object要遍历的对象  findItem查找项
    var nameList = [];//返回的数组
    var itemList = [];
    var allMessage;
    for (var i in object) {
      nameList.push(object[i].name); //属性
      if (findItem && object[i].name == findItem) {  //遍历对象,找到findItem的所有数据
        itemList = object[i];
      }
    }
    if (findItem){
      allMessage = { 'nameList': nameList, 'itemList': itemList }
    }else{
      allMessage = { 'nameList': nameList}
    }
    return allMessage;
  }

 

准备工作做完,将获取到到数据整理出来

js:

data: {
    multiArray: [],                 //国家省份三级联动数组
    objectMultiArray:'',            //中国省份数组
    countriesShowList: [],          //展示的国家数组
    provincesShowList:[],           //展示的省份数组
    citiesShowList:[],              //展示的地区数组
    provincesShow:false,            //是否第一次渲染省份数组
    multiSelect: '>',                 //选中的所在地
  },

 

// 获取三级联动数据
    brm.brm_request(接口地址)      发送request请求
      .then(function (res) {
        var arr = that.toArr(res.data, "中国")
        console.log(res.data)
        that.setData({
          multiArray: [arr.nameList, ['——'], ['——']],
          objectMultiArray: arr.itemList,
          countriesShowList: arr.nameList
        })
      }, function (err) {
    });

 

  //城市三级联动选中
  bindMultiPickerChange: function (e) {
    var index = e.detail.value;
    var arr;
    
    if (index[0] == 36){ //选中中国
      if(index[1]== null){
        if (this.data.citiesShowList[index[2]]&&this.data.citiesShowList[index[2]] != '——'){
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0] + ',' + this.data.citiesShowList[index[2]]
        }else{
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0]
        }
      }else{
        if (this.data.citiesShowList[index[2]] && this.data.citiesShowList[index[2]] != '——') {
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]] + ',' + this.data.citiesShowList[index[2]]
        } else {
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]]
        }
      }
    } else {
      arr = this.data.countriesShowList[index[0]]
    }
    this.setData({
      multiSelect: arr
    })
  }

 

  //三级联动城市改变
  bindMultiPickerColumnChange: function (e) {
    var provincesList = this.data.objectMultiArray.provinces;  //省份
    var provincesArr = this.toArr(provincesList).nameList;  //省份数组
    
    //移动第一列时,选中中国的情况
    if (e.detail.column == 0 && e.detail.value == 36){
        this.setData({
          multiArray: [this.data.multiArray[0], provincesArr, ['——']],
          provincesShowList:provincesArr,
          provincesShow:true
        })
    } else if (e.detail.column == 0 && e.detail.value != 36){   //选中非中国的国家情况 
        this.setData({
          multiArray: [this.data.multiArray[0], ['——'], ['——']]
        })
    }

    //移动第二列,选中相应的省份显示地区
    if (e.detail.column == 1 && this.data.provincesShow){
        var findProvincesList = this.toArr(provincesList, provincesArr[e.detail.value]); //provincesArr[e.detail.value] 当前选中的省份
        var findCitiesList = this.toArr(findProvincesList.itemList.cities); //当前选中省份的地区数组
        var citiesList ;

        if (findCitiesList.nameList.length > 0){ //当前省份是否有城市
          citiesList = findCitiesList.nameList;
        }else{
          citiesList = ['——'];
        }
        this.setData({
          multiArray: [this.data.multiArray[0], provincesArr, citiesList],
          citiesShowList: citiesList
        })
    }
  }

 在渲染过程中,遇到的问题:

1.进入页面后,会默认执行了bindcolumnchange事件,并且每一列都移动一次;所以在bindMultiPickerColumnChange函数中,就会执行“移动第二列,选中相应的省份显示地区”,所以在这里需要给它加一个标识this.data.provincesShow

2.默认选中中国后,不移动第二列,那第二列返回的移动数据为null;多处理一次为null时的情况


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序修改swiper小圆点发布时间:2022-07-18
下一篇:
判断H5页面环境是否在小程序的webview中发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap