• 小程序(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. 效果如下:

     

    作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!

  • 相关阅读:
    向MyEclipse添加Oracle数据库
    如何让搜索引擎抓取AJAX内容?
    XCode常用快捷键
    VMware Workstation 9上安装Mac OS X 10.8
    IOS学习第一篇——利用Xcode中的Interface Builder创建Hello World示例
    FM 101.7
    SqlServer游标操作
    添加COOKIE
    c#活动目录操作
    WCF服务调用方式
  • 原文地址:https://www.cnblogs.com/panax/p/14464223.html
Copyright © 2020-2023  润新知