在开发中，需要一个选定城市的列表。看了一下，做成三级联动好像不是特别方便。或者做成一个完整的页面，可以导航选择。话不多说，开始码字了。我使用了vant的ui框架中的IndexBar组件，其实这个组件的需求已经全部准备好了。我们只需要处理数据。首先需要介绍一下IndexBar组件，这里就不赘述了。官网写的很清楚，当你点击索引栏时，它会自动跳转。转到对应的IndexAnchor锚点位置...这是vant官方文档IndexBar的基本使用文档默认indexAnchor是A-Z这里我们不需要自定义loop部分我的想法是使用每个城市的名字排序第一个字母然后看我的数据{"id":101,"name":"Beijing","pid":1,"code":0},{"id":10101,"name":"天津市","pid":10001,"code":0},{"id":20101,"name":"石家庄市","pid":20001,"code":130100}因为之前的数据很乱，所以让后台的小弟重写了一个只包含市级城市的列表，非常好办。第一步是取出城市的名称。一个简单的循环就是OKletcityNameList=[]for(letpincityList){cityNameList.push(cityList[p].name)}ok现在我们把城市的名字存到cityNameList的下一步是关键的一步。直接取出数组首字母，按照A-Z排序。这里我们使用一个拼音插件来取出中文的首字母。先安装npminstalljs-pinyin然后我在mianImportpinyinfrom'js-pinyin'introducedin.js然后configureletpinyin=require('js-pinyin')pinyin.setOptions({checkPolyphone:false,charCase:0})在您的业务页面上，然后您可以使用它first=pinyin.getFullChars(el).substring(0,1);if(first==item){firstName[item].push(el)}})})这里FirstPin是定义在data中的数组，用于存储A-ZFirstPin：[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“J”、“K”、“L”、“M","N","P","Q","R","S","T","W","X","Y","Z"]，然后是我的格式firstName是这样的firName:{A:["阿拉善盟","鞍山市"]}最后在InderBar组件中写个循环就行了{{index}}ps：这里有个小问题，就是多音字的问题，重庆市已经划归中青市，我需要处理一下，所以我手动处理了firstName.C.push("Chongqing")for(letninfirstName.Z){if(firstName.Z[n]=='Chongqing'){firstName.Z.splice(n,1)}}
