小程序(mpvue)实现按字母排列选择城市

1.下载city.js (https://download.csdn.net/download/qq_39023042/15502002)

2. 引入citys

import citys from "@/utils/citys";
3. 城市分组
   // onLoad 里面:
// 筛选level === 3 市级
            let cityFilter = [] ;
            citys.cityObj.map((val,index)=>{
               if(val.level === 3){
                   cityFilter.push(val);
               }
            })
            // 城市分组
            let grountCity  = this.cityList(cityFilter,citys.searchLetter);
            this.searchLetter = citys.searchLetter ;
            grountCity.map((val,index)=>{                                   // 3个一组
                var result = [];
                for(var i=0;i<val.cityInfo.length;i+=3){
                    result.push(val.cityInfo.slice(i,i+3));
                }
                val.chooseCitys = result;
            })
            this.cityArr = grountCity ;





// methods 里面:
cityList(cityObj,searchLetter){
                cityObj.map(val=>{
                    val.name = this.splitName(val.name);
                })
                var tempObj = [];
                for (var i = 0; i < searchLetter.length; i++) {
                    var initial = searchLetter[i];
                    var cityInfo = [];
                    var tempArr = {};
                    tempArr.initial = initial;
                    for (var j = 0; j < cityObj.length; j++) {
                        if (initial == cityObj[j].initial) {
                            cityInfo.push(cityObj[j]);
                        }
                    }
                    tempArr.cityInfo = cityInfo;
                    tempObj.push(tempArr);
                }
                return tempObj;
            },

4. 效果如下:

 
posted @ 2021-03-01 16:06  Panax  阅读(250)  评论(0编辑  收藏  举报