H5使用vant并根据首字母处理数据锚点定位

html部分：

<van-fieldv-model="detailInfo.usedCarCity"type="text"label="订单成交城市"is-linkclass="is-link"requiredplaceholder="请选择订单成交城市"readonly@focus="usedCarCityObj.show = true":rules="rules.usedCarCity">
</van-field>
<van-popupv-model="usedCarCityObj.show"roundposition="bottom":style="{ height: '90%' }"><div class="mui-content"><!--一级列表--><!--列表首字母检索--><div id="showLetter" class="showLetter"><span></span></div><!--全局外层div--><div class="city"><!--全局外层div视图滑动--><divref="cityWrapper"style="background: #ffffff"class="city-wrapper city-wrapper-hook"><div ref="cityScroller" class="scroller-hook"><divclass="cities cities-hook"v-for="(item,index) in usedCarCityObj.list"><div :id="`city${item.initial}`" class="title">{{item.initial}}</div><ul><liv-for="(item1,index) in item.cityInfo"class="item bg-white":data-name="item1":data-id="item1"><span@click="onSelectRadio(item1,'usedCarCity','usedCarCityObj')"class="name":data-id="item1":data-name="item1">{{item1.value}}</span></li></ul></div></div><!--屏幕右边字母检索触摸滑动--><div ref="shortcut" class="shortcut shortcut-hook"><ul><liv-for="(item,index) in searchCityLetter"@click="goZM(`city${item}`)"class="item">{{item}}</li></ul></div></div></div></div>
</van-popup>

data部分：

detailInfo: {// 订单成交城市usedCarCity: ""
},
// 城市
usedCarCityObj: {show: false,list: [],
},
rules: {usedCarCity: [{required: true,message: "请选择订单成交城市",trigger: "onchange",},],
},
// 城市首字母
searchCityLetter: ["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z",
],

methods方法：

/*** 城市数据处理
*/
getCityNameList() {this.usedCarCityObj.list = [];for (var i = 0; i < this.searchCityLetter.length; i++) {var initial = this.searchCityLetter[i];var cityInfo = [];var tempArr = {};for (var j = 0; j < citydata.length; j++) {if (initial == citydata[j].ZM) {cityInfo.push(citydata[j]);}}tempArr.initial = initial;tempArr.cityInfo = cityInfo;this.usedCarCityObj.list.push(tempArr);}// 所有城市后面加上市this.usedCarCityObj.list.forEach((item) => {item.cityInfo.map((cityItem) => {cityItem.text += "市";cityItem.value += "市";});});
},
/*** 平滑锚点定位
*/
goZM(item) {this.$el.querySelector(`#${item}`).scrollIntoView({behavior: "smooth", // 平滑过渡block: "start", // start 上边框  center 中间  end 底部边框 与视窗顶部平齐});
},
/*** 下拉单选选择框
*/
onSelectRadio(item, field, obj) {// 判断是否为城市if (field == "usedCarCity") {if (this.detailInfo[`${field}`] != item.value) {this.detailInfo[`${field}`] = item.value;// 置空比价车商个数this.detailInfo.supplierNumber = "";// 置空比价车商个数的数组this.supplierNumberObj.list = [];// 获取比价车商个数this.getSupplierNumberList();}} else {this.detailInfo[`${field}`] = item.name;}this[`${obj}`].show = false;
},

css部分：

.city {display: block;
}.city .city-wrapper {position: absolute;top: 0;bottom: 0;width: 100%;
}.city .city-wrapper .cities .title {height: 2.8rem;padding-left: 1.6rem;line-height: 2.8rem;background-color: #f5f5f5;font-family: Helvetica;font-size: 1.2rem;color: #878787;
}.city .city-wrapper .cities .item {height: 4.4rem;padding: 0 1.6rem;line-height: 4.4rem;font-size: 1.6rem;
}.city .city-wrapper .cities .item .name {display: block;position: relative;
}.city .city-wrapper .cities .item .name:before,
.city .city-wrapper .cities .item .name:after {display: block;position: absolute;border-top: 0.1rem solid #e5e5e5;left: 0;width: 100%;content: " ";
}.city .city-wrapper .cities .item .name:before {display: none;top: 0;
}.city .city-wrapper .cities .item .name:after {display: block;bottom: 0;
}.city .city-wrapper .cities .item:active {background-color: #f0f0f0;
}.city .city-wrapper .cities .item:last-child .name:after {display: none;
}.city .city-wrapper .shortcut {position: fixed;z-index: 30;width: 4rem;top: 0rem;right: 1.5rem;font-family: Helvetica;height: calc(100vh - -6rem);display: flex;align-items: center;
}.city .city-wrapper .shortcut .item {height: 1.5rem;padding-left: 2.4rem;text-align: center;font-size: 1.2rem;color: #896a0d;margin-top: 0.4rem;
}.showLetter {position: fixed;color: #896a0d;width: 5rem;height: 5rem;top: 45%;left: 45%;border-radius: 10%;border: #896a0d 0.1rem solid;text-align: center;z-index: 9999;display: none;
}.showLetter span {width: 5rem;height: 5rem;line-height: 5rem;font-size: 3rem;
}/*二级菜单div视图容器*/
.conts {overflow: auto;display: none;width: 60%;height: 100%;right: 0;box-shadow: 0rem 0rem 0.2rem 0.2rem #e0e0e0;background-color: #efeff4;position: fixed;z-index: 2;
}/*标题*/
.conts .cont_ser {overflow: auto;position: fixed;top: 0;bottom: 0;width: 100%;
}/*车系*/
.car_series {overflow: auto;background-color: #fff;height: 2.8rem;padding-left: 1.6rem;line-height: 2.8rem;background-color: #f5f5f5;font-family: Helvetica;font-size: 1.2rem;color: #878787;
}.car_seriess {overflow: auto;display: block;position: relative;margin: 0;border: 0;height: 4.4rem;padding: 0 1.6rem;line-height: 4.4rem;font-size: 1.6rem;border-top: 0.1rem solid #e5e5e5;
}/*三级菜单*/
.car_bse {overflow: auto;display: none;width: 65%;height: 100%;right: 0;box-shadow: 0rem 0rem 0rem 0.2rem #e0e0e0;background-color: #efeff4;position: fixed;z-index: 3;
}.car_bse .cont_ser {overflow: auto;position: fixed;width: 100%;
}.carbse_ser {overflow: auto;display: block;position: relative;margin: 0;border-top: 0.1rem solid #e5e5e5;height: 4.4rem;padding: 0 1.6rem;width: 23rem;line-height: 4.4rem;font-size: 1.6rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}@media only screen and (max-height: 6rem) {.city .city-wrapper .shortcut .item {padding-top: 0.3rem;}
}

city.js数据：

var cityList=[   {"initial":"A","cityInfo":["阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"]},{"initial":"B","cityInfo":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"]},{"initial":"C","cityInfo":["重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳"]},{"initial":"D","cityInfo":["大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营"]},{"initial":"E","cityInfo":["鄂尔多斯","恩施","鄂州"]},{"initial":"F","cityInfo":["福州","防城港","佛山","抚顺","抚州","阜新","阜阳"]},{"initial":"G","cityInfo":["广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"]},{"initial":"H","cityInfo":["杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽"]},{"initial":"J","cityInfo":["济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江","酒泉"]},{"initial":"K","cityInfo":["昆明","开封"]},{"initial":"L","cityInfo":["兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水","柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁"]},{"initial":"M","cityInfo":["马鞍山","茂名","眉山","梅州","绵阳","牡丹江"]},{"initial":"N","cityInfo":["南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江"]},{"initial":"P","cityInfo":["盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"]},{"initial":"Q","cityInfo":["青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"]},{"initial":"R","cityInfo":["日喀则","日照"]},{"initial":"S","cityInfo":["上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州"]},{"initial":"T","cityInfo":["天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾"]},{"initial":"W","cityInfo":["武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州"]},{"initial":"X","cityInfo":["厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安"]},{"initial":"Y","cityInfo":["银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林"]},{"initial":"Z","cityInfo":["杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳"]}
]var citydata = [
{"value":"合肥","text":"合肥","ZM":"H"},{"value":"安庆","text":"安庆","ZM":"A"},{"value":"蚌埠","text":"蚌埠","ZM":"B"},{"value":"巢湖","text":"巢湖","ZM":"C"},{"value":"池州","text":"池州","ZM":"C"},{"value":"阜阳","text":"阜阳","ZM":"F"},{"value":"淮北","text":"淮北","ZM":"H"},{"value":"淮南","text":"淮南","ZM":"H"},{"value":"六安","text":"六安","ZM":"L"},{"value":"马鞍山","text":"马鞍山","ZM":"M"},{"value":"蒙城","text":"蒙城","ZM":"M"},{"value":"宁国","text":"宁国","ZM":"N"},{"value":"铜陵","text":"铜陵","ZM":"T"},{"value":"芜湖","text":"芜湖","ZM":"W"},{"value":"宣城","text":"宣城","ZM":"X"},{"value":"滁州","text":"滁州","ZM":"C"},{"value":"亳州","text":"亳州","ZM":"B"},{"value":"黄山","text":"黄山","ZM":"H"},{"value":"泗县","text":"泗县","ZM":"S"},{"value":"宿州","text":"宿州","ZM":"S"},{"value":"桐城","text":"桐城","ZM":"T"},{"value":"北京","text":"北京","ZM":"B"},{"value":"福州","text":"福州","ZM":"F"},{"value":"厦门","text":"厦门","ZM":"X"},{"value":"龙岩","text":"龙岩","ZM":"L"},{"value":"晋江","text":"晋江","ZM":"J"},{"value":"漳州","text":"漳州","ZM":"Z"},{"value":"莆田","text":"莆田","ZM":"P"},{"value":"泉州","text":"泉州","ZM":"Q"},{"value":"邵武","text":"邵武","ZM":"S"},{"value":"武夷山","text":"武夷山","ZM":"W"},{"value":"沙县","text":"沙县","ZM":"S"},{"value":"永安","text":"永安","ZM":"Y"},{"value":"建瓯","text":"建瓯","ZM":"J"},{"value":"南安","text":"南安","ZM":"N"},{"value":"南平","text":"南平","ZM":"N"},{"value":"宁德","text":"宁德","ZM":"N"},{"value":"浦城","text":"浦城","ZM":"P"},{"value":"福清","text":"福清","ZM":"F"},{"value":"三明","text":"三明","ZM":"S"},{"value":"兰州","text":"兰州","ZM":"L"},{"value":"定西","text":"定西","ZM":"D"},{"value":"合作","text":"合作","ZM":"H"},{"value":"平凉","text":"平凉","ZM":"P"},{"value":"凉州","text":"凉州","ZM":"L"},{"value":"临夏","text":"临夏","ZM":"L"},{"value":"静宁","text":"静宁","ZM":"J"},{"value":"酒泉","text":"酒泉","ZM":"J"},{"value":"张掖","text":"张掖","ZM":"Z"},{"value":"庆阳","text":"庆阳","ZM":"Q"},{"value":"武威","text":"武威","ZM":"W"},{"value":"武都","text":"武都","ZM":"W"},{"value":"西峰","text":"西峰","ZM":"X"},{"value":"天水","text":"天水","ZM":"T"},{"value":"广州","text":"广州","ZM":"G"},{"value":"深圳","text":"深圳","ZM":"S"},{"value":"珠海","text":"珠海","ZM":"Z"},{"value":"东莞","text":"东莞","ZM":"D"},{"value":"中山","text":"中山","ZM":"Z"},{"value":"顺德","text":"顺德","ZM":"S"},{"value":"汕头","text":"汕头","ZM":"S"},{"value":"端州","text":"端州","ZM":"D"},{"value":"潮州","text":"潮州","ZM":"C"},{"value":"韶关","text":"韶关","ZM":"S"},{"value":"湛江","text":"湛江","ZM":"Z"},{"value":"肇庆","text":"肇庆","ZM":"Z"},{"value":"茂名","text":"茂名","ZM":"M"},{"value":"梅州","text":"梅州","ZM":"M"},{"value":"佛山","text":"佛山","ZM":"B"},{"value":"开平","text":"开平","ZM":"K"},{"value":"惠州","text":"惠州","ZM":"H"},{"value":"江门","text":"江门","ZM":"J"},{"value":"揭阳","text":"揭阳","ZM":"J"},{"value":"台山","text":"台山","ZM":"T"},{"value":"清远","text":"清远","ZM":"Q"},{"value":"普宁","text":"普宁","ZM":"P"},{"value":"粤东","text":"粤东","ZM":"Y"},{"value":"云浮","text":"云浮","ZM":"Y"},{"value":"英德","text":"英德","ZM":"Y"},{"value":"新会","text":"新会","ZM":"X"},{"value":"阳春","text":"阳春","ZM":"Y"},{"value":"阳江","text":"阳江","ZM":"Y"},{"value":"揭西","text":"揭西","ZM":"J"},{"value":"流沙","text":"流沙","ZM":"L"},{"value":"河源","text":"河源","ZM":"H"},{"value":"鹤山","text":"鹤山","ZM":"H"},{"value":"高要","text":"高要","ZM":"G"},{"value":"恩平","text":"恩平","ZM":"E"},{"value":"澄海","text":"澄海","ZM":"C"},{"value":"罗定","text":"罗定","ZM":"L"},{"value":"连州","text":"连州","ZM":"L"},{"value":"揭东","text":"揭东","ZM":"J"},{"value":"南宁","text":"南宁","ZM":"N"},{"value":"柳州","text":"柳州","ZM":"L"},{"value":"桂林","text":"桂林","ZM":"G"},{"value":"北海","text":"北海","ZM":"B"},{"value":"百色","text":"百色","ZM":"B"},{"value":"贺州","text":"贺州","ZM":"H"},{"value":"河池","text":"河池","ZM":"H"},{"value":"贵港","text":"贵港","ZM":"G"},{"value":"宜州","text":"宜州","ZM":"Y"},{"value":"玉林","text":"玉林","ZM":"Y"},{"value":"钦州","text":"钦州","ZM":"Q"},{"value":"梧州","text":"梧州","ZM":"W"},{"value":"桂平","text":"桂平","ZM":"G"},{"value":"北流","text":"北流","ZM":"B"},{"value":"广西","text":"广西","ZM":"G"},{"value":"贵阳","text":"贵阳","ZM":"G"},{"value":"遵义","text":"遵义","ZM":"Z"},{"value":"兴义","text":"兴义","ZM":"X"},{"value":"安顺","text":"安顺","ZM":"A"},{"value":"毕节","text":"毕节","ZM":"B"},{"value":"都匀","text":"都匀","ZM":"D"},{"value":"六盘水","text":"六盘水","ZM":"L"},{"value":"凯里","text":"凯里","ZM":"K"},{"value":"铜仁","text":"铜仁","ZM":"T"},{"value":"施秉","text":"施秉","ZM":"S"},{"value":"海口","text":"海口","ZM":"H"},{"value":"琼海","text":"琼海","ZM":"Q"},{"value":"三亚","text":"三亚","ZM":"S"},{"value":"石家庄","text":"石家庄","ZM":"S"},{"value":"唐山","text":"唐山","ZM":"T"},{"value":"邢台","text":"邢台","ZM":"X"},{"value":"任丘","text":"任丘","ZM":"R"},{"value":"秦皇岛","text":"秦皇岛","ZM":"Q"},{"value":"廊坊","text":"廊坊","ZM":"L"},{"value":"邯郸","text":"邯郸","ZM":"H"},{"value":"衡水","text":"衡水","ZM":"H"},{"value":"沧州","text":"沧州","ZM":"C"},{"value":"保定","text":"保定","ZM":"B"},{"value":"张家口","text":"张家口","ZM":"Z"},{"value":"承德","text":"承德","ZM":"C"},{"value":"迁安","text":"迁安","ZM":"Q"},{"value":"辛集","text":"辛集","ZM":"X"},{"value":"玉田","text":"玉田","ZM":"Y"},{"value":"永清","text":"永清","ZM":"Y"},{"value":"涿州","text":"涿州","ZM":"Z"},{"value":"遵化","text":"遵化","ZM":"Z"},{"value":"大厂","text":"大厂","ZM":"D"},{"value":"乐亭","text":"乐亭","ZM":"L"},{"value":"兴隆","text":"兴隆","ZM":"X"},{"value":"霸州","text":"霸州","ZM":"B"},{"value":"郑州","text":"郑州","ZM":"Z"},{"value":"洛阳","text":"洛阳","ZM":"L"},{"value":"周口","text":"周口","ZM":"Z"},{"value":"信阳","text":"信阳","ZM":"X"},{"value":"新乡","text":"新乡","ZM":"X"},{"value":"商丘","text":"商丘","ZM":"S"},{"value":"三门峡","text":"三门峡","ZM":"S"},{"value":"濮阳","text":"濮阳","ZM":"P"},{"value":"南阳","text":"南阳","ZM":"N"},{"value":"漯河","text":"漯河","ZM":"L"},{"value":"焦作","text":"焦作","ZM":"J"},{"value":"开封","text":"开封","ZM":"K"},{"value":"安阳","text":"安阳","ZM":"A"},{"value":"鹤壁","text":"鹤壁","ZM":"H"},{"value":"林州","text":"林州","ZM":"L"},{"value":"平顶山","text":"平顶山","ZM":"P"},{"value":"济源","text":"济源","ZM":"J"},{"value":"驻马店","text":"驻马店","ZM":"Z"},{"value":"许昌","text":"许昌","ZM":"X"},{"value":"僕阳","text":"僕阳","ZM":"P"},{"value":"新郑","text":"新郑","ZM":"X"},{"value":"哈尔滨","text":"哈尔滨","ZM":"H"},{"value":"大庆","text":"大庆","ZM":"D"},{"value":"齐齐哈尔","text":"齐齐哈尔","ZM":"Q"},{"value":"鹤岗","text":"鹤岗","ZM":"H"},{"value":"北安","text":"北安","ZM":"B"},{"value":"佳木斯","text":"佳木斯","ZM":"J"},{"value":"鸡西","text":"鸡西","ZM":"J"},{"value":"牡丹江","text":"牡丹江","ZM":"M"},{"value":"七台河","text":"七台河","ZM":"Q"},{"value":"齐市","text":"齐市","ZM":"Q"},{"value":"铁力","text":"铁力","ZM":"T"},{"value":"伊春","text":"伊春","ZM":"Y"},{"value":"黑河","text":"黑河","ZM":"H"},{"value":"嫩江","text":"嫩江","ZM":"N"},{"value":"南岗","text":"南岗","ZM":"N"},{"value":"尚志","text":"尚志","ZM":"S"},{"value":"绥芬河","text":"绥芬河","ZM":"S"},{"value":"加格达奇","text":"加格达奇","ZM":"J"},{"value":"漠河","text":"漠河","ZM":"M"},{"value":"武汉","text":"武汉","ZM":"W"},{"value":"十堰","text":"十堰","ZM":"S"},{"value":"随州","text":"随州","ZM":"S"},{"value":"仙桃","text":"仙桃","ZM":"X"},{"value":"天门","text":"天门","ZM":"T"},{"value":"宜昌","text":"宜昌","ZM":"Y"},{"value":"黄石","text":"黄石","ZM":"H"},{"value":"荆门","text":"荆门","ZM":"J"},{"value":"荆州","text":"荆州","ZM":"J"},{"value":"丹江口","text":"丹江口","ZM":"D"},{"value":"利川","text":"利川","ZM":"L"},{"value":"黄冈","text":"黄冈","ZM":"H"},{"value":"恩施","text":"恩施","ZM":"E"},{"value":"鄂州","text":"鄂州","ZM":"E"},{"value":"咸宁","text":"咸宁","ZM":"X"},{"value":"孝感","text":"孝感","ZM":"X"},{"value":"潜江","text":"潜江","ZM":"Q"},{"value":"枣阳","text":"枣阳","ZM":"Z"},{"value":"石堰","text":"石堰","ZM":"S"},{"value":"长沙","text":"长沙","ZM":"C"},{"value":"郴州","text":"郴州","ZM":"C"},{"value":"常德","text":"常德","ZM":"C"},{"value":"衡阳","text":"衡阳","ZM":"H"},{"value":"怀化","text":"怀化","ZM":"H"},{"value":"娄底","text":"娄底","ZM":"L"},{"value":"株洲","text":"株洲","ZM":"Z"},{"value":"岳阳","text":"岳阳","ZM":"Y"},{"value":"湘潭","text":"湘潭","ZM":"X"},{"value":"邵阳","text":"邵阳","ZM":"S"},{"value":"湘谭","text":"湘谭","ZM":"X"},{"value":"永州","text":"永州","ZM":"Y"},{"value":"益阳","text":"益阳","ZM":"Y"},{"value":"株州","text":"株州","ZM":"Z"},{"value":"张家界","text":"张家界","ZM":"Z"},{"value":"吉首","text":"吉首","ZM":"J"},{"value":"马王堆","text":"马王堆","ZM":"M"},{"value":"浏阳","text":"浏阳","ZM":"L"},{"value":"汩罗","text":"汩罗","ZM":"G"},{"value":"邵东","text":"邵东","ZM":"S"},{"value":"长春","text":"长春","ZM":"C"},{"value":"吉林","text":"吉林","ZM":"J"},{"value":"通化","text":"通化","ZM":"T"},{"value":"延吉","text":"延吉","ZM":"Y"},{"value":"辽源","text":"辽源","ZM":"L"},{"value":"白山","text":"白山","ZM":"B"},{"value":"长岭","text":"长岭","ZM":"C"},{"value":"梅河口","text":"梅河口","ZM":"M"},{"value":"靖宇","text":"靖宇","ZM":"J"},{"value":"扶余","text":"扶余","ZM":"F"},{"value":"白城","text":"白城","ZM":"B"},{"value":"双辽","text":"双辽","ZM":"S"},{"value":"顺达","text":"顺达","ZM":"S"},{"value":"松原","text":"松原","ZM":"S"},{"value":"延边","text":"延边","ZM":"Y"},{"value":"四平","text":"四平","ZM":"S"},{"value":"大安","text":"大安","ZM":"D"},{"value":"南京","text":"南京","ZM":"N"},{"value":"苏州","text":"苏州","ZM":"S"},{"value":"无锡","text":"无锡","ZM":"W"},{"value":"常熟","text":"常熟","ZM":"C"},{"value":"常州","text":"常州","ZM":"C"},{"value":"丹阳","text":"丹阳","ZM":"D"},{"value":"淮安","text":"淮安","ZM":"H"},{"value":"江阴","text":"江阴","ZM":"J"},{"value":"昆山","text":"昆山","ZM":"K"},{"value":"连云港","text":"连云港","ZM":"L"},{"value":"南通","text":"南通","ZM":"N"},{"value":"盐城","text":"盐城","ZM":"Y"},{"value":"扬州","text":"扬州","ZM":"Y"},{"value":"张家港","text":"张家港","ZM":"Z"},{"value":"镇江","text":"镇江","ZM":"Z"},{"value":"泰兴","text":"泰兴","ZM":"T"},{"value":"泰州","text":"泰州","ZM":"T"},{"value":"徐州","text":"徐州","ZM":"X"},{"value":"吴江","text":"吴江","ZM":"W"},{"value":"宿迁","text":"宿迁","ZM":"S"},{"value":"太仓","text":"太仓","ZM":"T"},{"value":"仪征","text":"仪征","ZM":"Y"},{"value":"宜兴","text":"宜兴","ZM":"Y"},{"value":"海安","text":"海安","ZM":"H"},{"value":"靖江","text":"靖江","ZM":"J"},{"value":"江宁","text":"江宁","ZM":"J"},{"value":"淮阴","text":"淮阴","ZM":"H"},{"value":"江都","text":"江都","ZM":"J"},{"value":"常锡","text":"常锡","ZM":"C"},{"value":"大丰","text":"大丰","ZM":"D"},{"value":"南昌","text":"南昌","ZM":"N"},{"value":"上饶","text":"上饶","ZM":"S"},{"value":"萍乡","text":"萍乡","ZM":"P"},{"value":"新余","text":"新余","ZM":"X"},{"value":"宜春","text":"宜春","ZM":"Y"},{"value":"九江","text":"九江","ZM":"J"},{"value":"赣州","text":"赣州","ZM":"G"},{"value":"赣洲","text":"赣洲","ZM":"G"},{"value":"吉安","text":"吉安","ZM":"J"},{"value":"津昌","text":"津昌","ZM":"J"},{"value":"景德镇","text":"景德镇","ZM":"J"},{"value":"抚州","text":"抚州","ZM":"F"},{"value":"赣南","text":"赣南","ZM":"G"},{"value":"鹰潭","text":"鹰潭","ZM":"Y"},{"value":"樟树","text":"樟树","ZM":"Z"},{"value":"海城","text":"海城","ZM":"H"},{"value":"沈阳","text":"沈阳","ZM":"S"},{"value":"丹东","text":"丹东","ZM":"D"},{"value":"抚顺","text":"抚顺","ZM":"F"},{"value":"阜新","text":"阜新","ZM":"F"},{"value":"葫芦岛","text":"葫芦岛","ZM":"H"},{"value":"大石桥","text":"大石桥","ZM":"D"},{"value":"朝阳","text":"朝阳","ZM":"C"},{"value":"大连","text":"大连","ZM":"D"},{"value":"本溪","text":"本溪","ZM":"B"},{"value":"鞍山","text":"鞍山","ZM":"A"},{"value":"锦州","text":"锦州","ZM":"J"},{"value":"辽河","text":"辽河","ZM":"L"},{"value":"辽阳","text":"辽阳","ZM":"L"},{"value":"营口","text":"营口","ZM":"Y"},{"value":"瓦房店","text":"瓦房店","ZM":"W"},{"value":"盘锦","text":"盘锦","ZM":"P"},{"value":"铁岭","text":"铁岭","ZM":"T"},{"value":"呼和浩特","text":"呼和浩特","ZM":"H"},{"value":"包头","text":"包头","ZM":"B"},{"value":"赤峰","text":"赤峰","ZM":"C"},{"value":"通辽","text":"通辽","ZM":"T"},{"value":"乌海","text":"乌海","ZM":"W"},{"value":"东胜","text":"东胜","ZM":"D"},{"value":"海拉尔","text":"海拉尔","ZM":"H"},{"value":"鄂尔多斯","text":"鄂尔多斯","ZM":"E"},{"value":"临河","text":"临河","ZM":"L"},{"value":"呼市","text":"呼市","ZM":"H"},{"value":"集宁","text":"集宁","ZM":"J"},{"value":"呼伦贝尔","text":"呼伦贝尔","ZM":"H"},{"value":"巴盟","text":"巴盟","ZM":"B"},{"value":"兴安盟","text":"兴安盟","ZM":"X"},{"value":"牙克石","text":"牙克石","ZM":"Y"},{"value":"乌兰浩特","text":"乌兰浩特","ZM":"W"},{"value":"锡盟","text":"锡盟","ZM":"X"},{"value":"锡林浩特","text":"锡林浩特","ZM":"X"},{"value":"银川","text":"银川","ZM":"Y"},{"value":"吴忠","text":"吴忠","ZM":"W"},{"value":"固原","text":"固原","ZM":"G"},{"value":"西宁","text":"西宁","ZM":"X"},{"value":"格尔木","text":"格尔木","ZM":"G"},{"value":"青海","text":"青海","ZM":"Q"},{"value":"海东","text":"海东","ZM":"H"},{"value":"德州","text":"德州","ZM":"D"},{"value":"济南","text":"济南","ZM":"J"},{"value":"青岛","text":"青岛","ZM":"Q"},{"value":"烟台","text":"烟台","ZM":"Y"},{"value":"威海","text":"威海","ZM":"W"},{"value":"潍坊","text":"潍坊","ZM":"W"},{"value":"泰安","text":"泰安","ZM":"T"},{"value":"枣庄","text":"枣庄","ZM":"Z"},{"value":"招远","text":"招远","ZM":"Z"},{"value":"淄博","text":"淄博","ZM":"Z"},{"value":"东营","text":"东营","ZM":"D"},{"value":"高密","text":"高密","ZM":"G"},{"value":"菏泽","text":"菏泽","ZM":"H"},{"value":"滨州","text":"滨州","ZM":"B"},{"value":"聊城","text":"聊城","ZM":"L"},{"value":"龙口","text":"龙口","ZM":"L"},{"value":"莱州","text":"莱州","ZM":"L"},{"value":"临沂","text":"临沂","ZM":"L"},{"value":"济宁","text":"济宁","ZM":"J"},{"value":"青州","text":"青州","ZM":"Q"},{"value":"日照","text":"日照","ZM":"R"},{"value":"荣成","text":"荣成","ZM":"R"},{"value":"寿光","text":"寿光","ZM":"S"},{"value":"文登","text":"文登","ZM":"W"},{"value":"滕州","text":"滕州","ZM":"T"},{"value":"烟威","text":"烟威","ZM":"Y"},{"value":"沂水","text":"沂水","ZM":"Y"},{"value":"荷泽","text":"荷泽","ZM":"H"},{"value":"平度","text":"平度","ZM":"P"},{"value":"即墨","text":"即墨","ZM":"J"},{"value":"胶南","text":"胶南","ZM":"J"},{"value":"莱芜","text":"莱芜","ZM":"L"},{"value":"莱西","text":"莱西","ZM":"L"},{"value":"莱阳","text":"莱阳","ZM":"L"},{"value":"曲阜","text":"曲阜","ZM":"Q"},{"value":"太原","text":"太原","ZM":"T"},{"value":"大同","text":"大同","ZM":"D"},{"value":"晋城","text":"晋城","ZM":"J"},{"value":"晋中","text":"晋中","ZM":"J"},{"value":"临汾","text":"临汾","ZM":"L"},{"value":"长治","text":"长治","ZM":"C"},{"value":"运城","text":"运城","ZM":"Y"},{"value":"榆次","text":"榆次","ZM":"Y"},{"value":"孝义","text":"孝义","ZM":"X"},{"value":"忻州","text":"忻州","ZM":"X"},{"value":"介休","text":"介休","ZM":"J"},{"value":"离石","text":"离石","ZM":"L"},{"value":"候马","text":"候马","ZM":"H"},{"value":"洪洞","text":"洪洞","ZM":"H"},{"value":"侯马","text":"侯马","ZM":"H"},{"value":"合津","text":"合津","ZM":"H"},{"value":"汾阳","text":"汾阳","ZM":"F"},{"value":"阳泉","text":"阳泉","ZM":"Y"},{"value":"朔州","text":"朔州","ZM":"S"},{"value":"西安","text":"西安","ZM":"X"},{"value":"咸阳","text":"咸阳","ZM":"X"},{"value":"渭南","text":"渭南","ZM":"W"},{"value":"榆林","text":"榆林","ZM":"Y"},{"value":"宝鸡","text":"宝鸡","ZM":"B"},{"value":"安康","text":"安康","ZM":"A"},{"value":"汉中","text":"汉中","ZM":"H"},{"value":"延安","text":"延安","ZM":"Y"},{"value":"韩城","text":"韩城","ZM":"H"},{"value":"铜川","text":"铜川","ZM":"T"},{"value":"上海","text":"上海","ZM":"S"},{"value":"金山","text":"金山","ZM":"J"},{"value":"成都","text":"成都","ZM":"C"},{"value":"绵阳","text":"绵阳","ZM":"M"},{"value":"遂宁","text":"遂宁","ZM":"S"},{"value":"攀枝花","text":"攀枝花","ZM":"P"},{"value":"西昌","text":"西昌","ZM":"X"},{"value":"宜宾","text":"宜宾","ZM":"Y"},{"value":"雅安","text":"雅安","ZM":"Y"},{"value":"自贡","text":"自贡","ZM":"Z"},{"value":"资阳","text":"资阳","ZM":"Z"},{"value":"广元","text":"广元","ZM":"G"},{"value":"德阳","text":"德阳","ZM":"D"},{"value":"乐山","text":"乐山","ZM":"L"},{"value":"南充","text":"南充","ZM":"N"},{"value":"眉山","text":"眉山","ZM":"M"},{"value":"峨眉山","text":"峨眉山","ZM":"E"},{"value":"巴中","text":"巴中","ZM":"B"},{"value":"泸州","text":"泸州","ZM":"L"},{"value":"绵竹","text":"绵竹","ZM":"M"},{"value":"内江","text":"内江","ZM":"N"},{"value":"荣县","text":"荣县","ZM":"R"},{"value":"武候","text":"武候","ZM":"W"},{"value":"天津","text":"天津","ZM":"T"},{"value":"拉萨","text":"拉萨","ZM":"L"},{"value":"日喀则","text":"日喀则","ZM":"R"},{"value":"山南","text":"山南","ZM":"S"},{"value":"乌鲁木齐","text":"乌鲁木齐","ZM":"W"},{"value":"喀什","text":"喀什","ZM":"K"},{"value":"克拉玛依","text":"克拉玛依","ZM":"K"},{"value":"库尔勒","text":"库尔勒","ZM":"K"},{"value":"奎屯","text":"奎屯","ZM":"K"},{"value":"哈密","text":"哈密","ZM":"H"},{"value":"吐鲁番","text":"吐鲁番","ZM":"T"},{"value":"伊宁","text":"伊宁","ZM":"Y"},{"value":"博乐","text":"博乐","ZM":"B"},{"value":"石河子","text":"石河子","ZM":"S"},{"value":"乌市","text":"乌市","ZM":"W"},{"value":"塔城","text":"塔城","ZM":"T"},{"value":"昌吉","text":"昌吉","ZM":"C"},{"value":"巴州库尔勒","text":"巴州库尔勒","ZM":"B"},{"value":"阿勒泰","text":"阿勒泰","ZM":"A"},{"value":"阿图什","text":"阿图什","ZM":"A"},{"value":"阿克苏","text":"阿克苏","ZM":"A"},{"value":"和田","text":"和田","ZM":"H"},{"value":"昆明","text":"昆明","ZM":"K"},{"value":"玉溪","text":"玉溪","ZM":"Y"},{"value":"曲靖","text":"曲靖","ZM":"Q"},{"value":"大理","text":"大理","ZM":"D"},{"value":"开远","text":"开远","ZM":"K"},{"value":"保山","text":"保山","ZM":"B"},{"value":"楚雄","text":"楚雄","ZM":"C"},{"value":"个旧","text":"个旧","ZM":"G"},{"value":"潞西","text":"潞西","ZM":"L"},{"value":"临沧","text":"临沧","ZM":"L"},{"value":"健中冈","text":"健中冈","ZM":"J"},{"value":"文山","text":"文山","ZM":"W"},{"value":"西双版纳","text":"西双版纳","ZM":"X"},{"value":"思茅","text":"思茅","ZM":"S"},{"value":"昭通","text":"昭通","ZM":"Z"},{"value":"州芒","text":"州芒","ZM":"Z"},{"value":"杭州","text":"杭州","ZM":"H"},{"value":"宁波","text":"宁波","ZM":"N"},{"value":"温州","text":"温州","ZM":"W"},{"value":"黄岩","text":"黄岩","ZM":"H"},{"value":"嘉兴","text":"嘉兴","ZM":"J"},{"value":"金华","text":"金华","ZM":"J"},{"value":"乐清","text":"乐清","ZM":"Y"},{"value":"丽水","text":"丽水","ZM":"L"},{"value":"东阳","text":"东阳","ZM":"D"},{"value":"湖州","text":"湖州","ZM":"H"},{"value":"衢州","text":"衢州","ZM":"Q"},{"value":"瑞安","text":"瑞安","ZM":"R"},{"value":"平阳","text":"平阳","ZM":"P"},{"value":"台州","text":"台州","ZM":"T"},{"value":"绍兴","text":"绍兴","ZM":"S"},{"value":"萧山","text":"萧山","ZM":"X"},{"value":"永康","text":"永康","ZM":"Y"},{"value":"义乌","text":"义乌","ZM":"Y"},{"value":"舟山","text":"舟山","ZM":"Z"},{"value":"长兴","text":"长兴","ZM":"C"},{"value":"诸暨","text":"诸暨","ZM":"Z"},{"value":"诸市","text":"诸市","ZM":"Z"},{"value":"玉环","text":"玉环","ZM":"Y"},{"value":"余杭","text":"余杭","ZM":"Y"},{"value":"余姚","text":"余姚","ZM":"Y"},{"value":"永嘉","text":"永嘉","ZM":"Y"},{"value":"嵊州","text":"嵊州","ZM":"S"},{"value":"上虞","text":"上虞","ZM":"S"},{"value":"温岭","text":"温岭","ZM":"W"},{"value":"桐庐","text":"桐庐","ZM":"T"},{"value":"天台","text":"天台","ZM":"T"},{"value":"建德","text":"建德","ZM":"J"},{"value":"浒山","text":"浒山","ZM":"X"},{"value":"康桥","text":"康桥","ZM":"K"},{"value":"临安","text":"临安","ZM":"L"},{"value":"龙游","text":"龙游","ZM":"L"},{"value":"临海","text":"临海","ZM":"L"},{"value":"德清","text":"德清","ZM":"D"},{"value":"富阳","text":"富阳","ZM":"F"},{"value":"苍南","text":"苍南","ZM":"C"},{"value":"安吉","text":"安吉","ZM":"A"},{"value":"慈溪","text":"慈溪","ZM":"C"},{"value":"重庆","text":"重庆","ZM":"C"},{"value":"永川","text":"永川","ZM":"Y"},{"value":"奉节","text":"奉节","ZM":"F"},{"value":"涪陵","text":"涪陵","ZM":"F"},{"value":"江津","text":"江津","ZM":"J"}
]

H5使用vant并根据首字母处理数据锚点定位相关推荐

将一个文字的大集合按照第一个文字的首字母进行切分
首先感谢看到的文章 https://blog.csdn.net/chy555chy/article/details/51878226 项目中有按照字母排序并且展示类别的需求,可是后台太坑,只给了一大 ...
提取汉字拼音首字母
针对多音字不是很准确. public static void main( String[] args ) { System.out.println( getGBKpy( "Hi.." ...
从数据库中查找数据并按首字母排序
在SQL语句中,在检索语句的最后加上一个order by+排序列名就可以对该列的数据进行排序.排序的方式有两种:升序(ASC)和降序(DSC). 前些天修改项目代码时发现,按照这种规则 ...
springboot返回按照首字母分组排序数据
最终需要实现的效果图如下: 一.实现思路 1.将数据list 进行排序Collections,排序后是按照汉字字母排序的. 2.循环找出26个字母,以字母为key,以list中相同首字母的数据为值(集 ...
Java中获取GBK编码汉字的拼音首字母（包括生僻字）
Java中获取GBK编码汉字的拼音首字母(包括生僻字) 前言代码结果前言网上关于Java中获取汉字的拼音首字母的方法很多,但大多基于GB2312的汉字所属编码位置判断方法,现有一种基于GBK编 ...
【如何通过汉字首字母拼写查询数据】mysql数据库汉字首字母获取查询或通过ES插件elasticsearch-analysis-pinyin进行汉字首拼查询
一.mysql数据库汉字首字母获取查询 1.汉字提取首字母 get_first_pinyin_char: 此函数是将一个中文字符串的第一个汉字转成拼音字母 (例如:"李"-> ...
分享一个H5使用JQ首字母排序的通讯录
首先是HTML部分,我是将js和css分开放的注意一下路径,JQ就随便找个版本就可以了 <!DOCTYPE html> <html lang="zh-CN"> ...
选择城市，按城市的首字母进行排序
1.新建父组件choiceCity.vue <template><view class="choiceCity"><view class=" ...
输入框根据拼音首字母/中文字符联想补全
输入框根据拼音首字母/中文字符联想补全背景工具实现 H5 MySQL 创建中文转拼音函数创建拼音缓存表&添加索引创建触发器(同步project到拼音缓存表中) 查询语句背景在H5 ...

H5使用vant并根据首字母处理数据锚点定位

H5使用vant并根据首字母处理数据锚点定位相关推荐

最新文章

热门文章