賣座網：https://m.maizuo.com/v5/#/city（F12拿城市列表JSON）
MintUI索引列表：https://elemefe.github.io/mint-ui/#/index-list
城市列表的JSON數據：
{"cities":[{"cityId":110100,"name":"北京","pinyin":"beijing","isHot":1},{"cityId":120100,"name":"天津","pinyin":"tianjin","isHot":0},{"cityId":130100,"name":"石家莊","pinyin":"shijia","isHot":0},{"cityId":130200,"name":"唐山","pinyin":"tangshan","isHot":0},{"cityId":130300,"name":"秦皇島","pinyin":"qinhuang","isHot":0},{"cityId":130400,"name":"邯鄲","pinyin":"handan","isHot":0},{"cityId":130500,"name":"邢臺","pinyin":"xingtai","isHot":0},{"cityId":130600,"name":"保定","pinyin":"baoding","isHot":0},{"cityId":130700,"name":"張家口","pinyin":"zhangjia","isHot":0},{"cityId":130800,"name":"承德","pinyin":"chengde","isHot":0},{"cityId":130900,"name":"滄州","pinyin":"cangzhou","isHot":0},{"cityId":131000,"name":"廊坊","pinyin":"langfang","isHot":0},{"cityId":131100,"name":"衡水","pinyin":"hengshui","isHot":0},{"cityId":140100,"name":"太原","pinyin":"taiyuan","isHot":0},{"cityId":140200,"name":"大同","pinyin":"datong","isHot":0},{"cityId":140300,"name":"陽泉","pinyin":"yangquan","isHot":0},{"cityId":140400,"name":"長治","pinyin":"changzhi","isHot":0},{"cityId":140500,"name":"晉城","pinyin":"jincheng","isHot":0},{"cityId":140600,"name":"朔州","pinyin":"shuozhou","isHot":0},{"cityId":140700,"name":"晉中","pinyin":"jinzhong","isHot":0},{"cityId":140800,"name":"運城","pinyin":"yuncheng","isHot":0},{"cityId":140900,"name":"忻州","pinyin":"xinzhou","isHot":0},{"cityId":141000,"name":"臨汾","pinyin":"linfen","isHot":0},{"cityId":141100,"name":"呂梁","pinyin":"lvliang","isHot":0},{"cityId":150100,"name":"呼和浩特","pinyin":"huhe","isHot":0},{"cityId":150200,"name":"包頭","pinyin":"baotou","isHot":0},{"cityId":150300,"name":"烏海","pinyin":"wuhai","isHot":0},{"cityId":150600,"name":"鄂爾多斯","pinyin":"eer","isHot":0},{"cityId":150700,"name":"呼倫貝爾","pinyin":"hulun","isHot":0},{"cityId":150800,"name":"巴彥淖爾","pinyin":"bayan","isHot":0},{"cityId":150900,"name":"烏蘭察布","pinyin":"wulan","isHot":0},{"cityId":152500,"name":"錫林郭勒盟","pinyin":"xilin","isHot":0},{"cityId":210100,"name":"瀋陽","pinyin":"shenyang","isHot":0},{"cityId":210200,"name":"大連","pinyin":"dalian","isHot":0},{"cityId":210300,"name":"鞍山","pinyin":"anshan","isHot":0},{"cityId":210400,"name":"撫順","pinyin":"fushun","isHot":0},{"cityId":210500,"name":"本溪","pinyin":"benxi","isHot":0},{"cityId":210600,"name":"丹東","pinyin":"dandong","isHot":0},{"cityId":210700,"name":"錦州","pinyin":"jinzhou","isHot":0},{"cityId":210800,"name":"營口","pinyin":"yingkou","isHot":0},{"cityId":210900,"name":"阜新","pinyin":"fuxin","isHot":0},{"cityId":211000,"name":"遼陽","pinyin":"liaoyang","isHot":0},{"cityId":211100,"name":"盤錦","pinyin":"panjin","isHot":0},{"cityId":211200,"name":"鐵嶺","pinyin":"tieling","isHot":0},{"cityId":211300,"name":"朝陽","pinyin":"chaoyang","isHot":0},{"cityId":211400,"name":"葫蘆島","pinyin":"hulu","isHot":0},{"cityId":220100,"name":"長春","pinyin":"changchun","isHot":0},{"cityId":220200,"name":"吉林","pinyin":"jilin","isHot":0},{"cityId":220300,"name":"四平","pinyin":"siping","isHot":0},{"cityId":220400,"name":"遼源","pinyin":"liaoyuan","isHot":0},{"cityId":220500,"name":"通化","pinyin":"tonghua","isHot":0},{"cityId":220600,"name":"白山","pinyin":"baishan","isHot":0},{"cityId":220700,"name":"松原","pinyin":"songyuan","isHot":0},{"cityId":220800,"name":"白城","pinyin":"baicheng","isHot":0},{"cityId":222400,"name":"延邊朝鮮族自治州","pinyin":"yanbian","isHot":0},{"cityId":230100,"name":"哈爾濱","pinyin":"haer","isHot":0},{"cityId":230200,"name":"齊齊哈爾","pinyin":"qiqi","isHot":0},{"cityId":230400,"name":"鶴崗","pinyin":"hegang","isHot":0},{"cityId":230500,"name":"雙鴨山","pinyin":"shuangya","isHot":0},{"cityId":230600,"name":"大慶","pinyin":"daqing","isHot":0},{"cityId":230700,"name":"伊春","pinyin":"yichun","isHot":0},{"cityId":230800,"name":"佳木斯","pinyin":"jiamu","isHot":0},{"cityId":230900,"name":"七臺河","pinyin":"qitai","isHot":0},{"cityId":231000,"name":"牡丹江","pinyin":"mudan","isHot":0},{"cityId":231100,"name":"黑河","pinyin":"heihe","isHot":0},{"cityId":231200,"name":"綏化","pinyin":"suihua","isHot":0},{"cityId":310100,"name":"上海","pinyin":"shanghai","isHot":1},{"cityId":320100,"name":"南京","pinyin":"nanjing","isHot":0},{"cityId":320300,"name":"徐州","pinyin":"xuzhou","isHot":0},{"cityId":320400,"name":"常州","pinyin":"changzhou","isHot":0},{"cityId":320500,"name":"蘇州","pinyin":"suzhou","isHot":0},{"cityId":320600,"name":"南通","pinyin":"nantong","isHot":0},{"cityId":320700,"name":"連雲港","pinyin":"lianyun","isHot":0},{"cityId":320800,"name":"淮安","pinyin":"huaian","isHot":0},{"cityId":320900,"name":"鹽城","pinyin":"yancheng","isHot":0},{"cityId":321000,"name":"揚州","pinyin":"yangzhou","isHot":0},{"cityId":321100,"name":"鎮江","pinyin":"zhenjiang","isHot":0},{"cityId":321200,"name":"泰州","pinyin":"taizhou","isHot":0},{"cityId":321300,"name":"宿遷","pinyin":"suqian","isHot":0},{"cityId":330100,"name":"杭州","pinyin":"hangzhou","isHot":0},{"cityId":330200,"name":"寧波","pinyin":"ningbo","isHot":0},{"cityId":330300,"name":"溫州","pinyin":"wenzhou","isHot":0},{"cityId":330400,"name":"嘉興","pinyin":"jiaxing","isHot":0},{"cityId":330500,"name":"湖州","pinyin":"huzhou","isHot":0},{"cityId":330600,"name":"紹興","pinyin":"shaoxing","isHot":0},{"cityId":330700,"name":"金華","pinyin":"jinhua","isHot":0},{"cityId":330800,"name":"衢州","pinyin":"quzhou","isHot":0},{"cityId":330900,"name":"舟山","pinyin":"zhoushan","isHot":0},{"cityId":331000,"name":"台州","pinyin":"taizhou","isHot":0},{"cityId":331100,"name":"麗水","pinyin":"lishui","isHot":0},{"cityId":340100,"name":"合肥","pinyin":"hefei","isHot":0},{"cityId":340200,"name":"蕪湖","pinyin":"wuhu","isHot":0},{"cityId":340300,"name":"蚌埠","pinyin":"bangbu","isHot":0},{"cityId":340400,"name":"淮南","pinyin":"huainan","isHot":0},{"cityId":340500,"name":"馬鞍山","pinyin":"maan","isHot":0},{"cityId":340600,"name":"淮北","pinyin":"huaibei","isHot":0},{"cityId":340700,"name":"銅陵","pinyin":"tongling","isHot":0},{"cityId":340800,"name":"安慶","pinyin":"anqing","isHot":0},{"cityId":341000,"name":"黃山","pinyin":"huangshan","isHot":0},{"cityId":341100,"name":"滁州","pinyin":"chuzhou","isHot":0},{"cityId":341200,"name":"阜陽","pinyin":"fuyang","isHot":0},{"cityId":341300,"name":"宿州","pinyin":"suzhou","isHot":0},{"cityId":341500,"name":"六安","pinyin":"liuan","isHot":0},{"cityId":341600,"name":"亳州","pinyin":"bozhou","isHot":0},{"cityId":341800,"name":"宣城","pinyin":"xuancheng","isHot":0},{"cityId":350100,"name":"福州","pinyin":"fuzhou","isHot":0},{"cityId":350200,"name":"廈門","pinyin":"shamen","isHot":0},{"cityId":350300,"name":"莆田","pinyin":"putian","isHot":0},{"cityId":350400,"name":"三明","pinyin":"sanming","isHot":0},{"cityId":350500,"name":"泉州","pinyin":"quanzhou","isHot":0},{"cityId":350600,"name":"漳州","pinyin":"zhangzhou","isHot":0},{"cityId":350700,"name":"南平","pinyin":"nanping","isHot":0},{"cityId":350800,"name":"龍巖","pinyin":"longyan","isHot":0},{"cityId":350900,"name":"寧德","pinyin":"ningde","isHot":0},{"cityId":360100,"name":"南昌","pinyin":"nanchang","isHot":0},{"cityId":360200,"name":"景德鎮","pinyin":"jingde","isHot":0},{"cityId":360300,"name":"萍鄉","pinyin":"pingxiang","isHot":0},{"cityId":360400,"name":"九江","pinyin":"jiujiang","isHot":0},{"cityId":360500,"name":"新餘","pinyin":"xinyu","isHot":0},{"cityId":360600,"name":"鷹潭","pinyin":"yingtan","isHot":0},{"cityId":360700,"name":"贛州","pinyin":"ganzhou","isHot":0},{"cityId":360800,"name":"吉安","pinyin":"jian","isHot":0},{"cityId":360900,"name":"宜春","pinyin":"yichun","isHot":0},{"cityId":361000,"name":"撫州","pinyin":"fuzhou","isHot":0},{"cityId":361100,"name":"上饒","pinyin":"shangrao","isHot":0},{"cityId":370100,"name":"濟南","pinyin":"jinan","isHot":0},{"cityId":370200,"name":"青島","pinyin":"qingdao","isHot":0},{"cityId":370300,"name":"淄博","pinyin":"zibo","isHot":0},{"cityId":370400,"name":"棗莊","pinyin":"zaozhuang","isHot":0},{"cityId":370500,"name":"東營","pinyin":"dongying","isHot":0},{"cityId":370600,"name":"煙臺","pinyin":"yantai","isHot":0},{"cityId":370700,"name":"濰坊","pinyin":"weifang","isHot":0},{"cityId":370800,"name":"濟寧","pinyin":"jining","isHot":0},{"cityId":370900,"name":"泰安","pinyin":"taian","isHot":0},{"cityId":371000,"name":"威海","pinyin":"weihai","isHot":0},{"cityId":371100,"name":"日照","pinyin":"rizhao","isHot":0},{"cityId":371200,"name":"萊蕪","pinyin":"laiwu","isHot":0},{"cityId":371300,"name":"臨沂","pinyin":"linyi","isHot":0},{"cityId":371400,"name":"德州","pinyin":"dezhou","isHot":0},{"cityId":371500,"name":"聊城","pinyin":"liaocheng","isHot":0},{"cityId":371600,"name":"濱州","pinyin":"binzhou","isHot":0},{"cityId":371700,"name":"菏澤","pinyin":"heze","isHot":0},{"cityId":410100,"name":"鄭州","pinyin":"zhengzhou","isHot":0},{"cityId":410200,"name":"開封","pinyin":"kaifeng","isHot":0},{"cityId":410300,"name":"洛陽","pinyin":"luoyang","isHot":0},{"cityId":410400,"name":"平頂山","pinyin":"pingding","isHot":0},{"cityId":410500,"name":"安陽","pinyin":"anyang","isHot":0},{"cityId":410600,"name":"鶴壁","pinyin":"hebi","isHot":0},{"cityId":410700,"name":"新鄉","pinyin":"xinxiang","isHot":0},{"cityId":410800,"name":"焦作","pinyin":"jiaozuo","isHot":0},{"cityId":410900,"name":"濮陽","pinyin":"puyang","isHot":0},{"cityId":411000,"name":"許昌","pinyin":"xuchang","isHot":0},{"cityId":411100,"name":"漯河","pinyin":"luohe","isHot":0},{"cityId":411200,"name":"三門峽","pinyin":"sanmen","isHot":0},{"cityId":411300,"name":"南陽","pinyin":"nanyang","isHot":0},{"cityId":411400,"name":"商丘","pinyin":"shangqiu","isHot":0},{"cityId":411500,"name":"信陽","pinyin":"xinyang","isHot":0},{"cityId":411600,"name":"周口","pinyin":"zhoukou","isHot":0},{"cityId":411700,"name":"駐馬店","pinyin":"zhuma","isHot":0},{"cityId":419001,"name":"濟源","pinyin":"jiyuan","isHot":0},{"cityId":420100,"name":"武漢","pinyin":"wuhan","isHot":0},{"cityId":420200,"name":"黃石","pinyin":"huangshi","isHot":0},{"cityId":420300,"name":"十堰","pinyin":"shiyan","isHot":0},{"cityId":420500,"name":"宜昌","pinyin":"yichang","isHot":0},{"cityId":420600,"name":"襄陽","pinyin":"xiangyang","isHot":0},{"cityId":420700,"name":"鄂州","pinyin":"ezhou","isHot":0},{"cityId":420800,"name":"荊門","pinyin":"jingmen","isHot":0},{"cityId":420900,"name":"孝感","pinyin":"xiaogan","isHot":0},{"cityId":421000,"name":"荊州","pinyin":"jingzhou","isHot":0},{"cityId":421100,"name":"黃岡","pinyin":"huanggang","isHot":0},{"cityId":421200,"name":"咸寧","pinyin":"xianning","isHot":0},{"cityId":421300,"name":"隨州","pinyin":"suizhou","isHot":0},{"cityId":422800,"name":"恩施土家族苗族自治州","pinyin":"enshi","isHot":0},{"cityId":429004,"name":"仙桃","pinyin":"xiantao","isHot":0},{"cityId":429005,"name":"潛江","pinyin":"qianjiang","isHot":0},{"cityId":429006,"name":"天門","pinyin":"tianmen","isHot":0},{"cityId":430100,"name":"長沙","pinyin":"changsha","isHot":0},{"cityId":430200,"name":"株洲","pinyin":"zhuzhou","isHot":0},{"cityId":430300,"name":"湘潭","pinyin":"xiangtan","isHot":0},{"cityId":430400,"name":"衡陽","pinyin":"hengyang","isHot":0},{"cityId":430500,"name":"邵陽","pinyin":"shaoyang","isHot":0},{"cityId":430600,"name":"岳陽","pinyin":"yueyang","isHot":0},{"cityId":430700,"name":"常德","pinyin":"changde","isHot":0},{"cityId":430800,"name":"張家界","pinyin":"zhangjia","isHot":0},{"cityId":430900,"name":"益陽","pinyin":"yiyang","isHot":0},{"cityId":431000,"name":"郴州","pinyin":"chenzhou","isHot":0},{"cityId":431100,"name":"永州","pinyin":"yongzhou","isHot":0},{"cityId":431200,"name":"懷化","pinyin":"huaihua","isHot":0},{"cityId":431300,"name":"婁底","pinyin":"loudi","isHot":0},{"cityId":433100,"name":"湘西土家族苗族自治州","pinyin":"xiangxi","isHot":0},{"cityId":440100,"name":"廣州","pinyin":"guangzhou","isHot":1},{"cityId":440200,"name":"韶關","pinyin":"shaoguan","isHot":0},{"cityId":440300,"name":"深圳","pinyin":"shenzhen","isHot":1},{"cityId":440400,"name":"珠海","pinyin":"zhuhai","isHot":0},{"cityId":440500,"name":"汕頭","pinyin":"shantou","isHot":0},{"cityId":440600,"name":"佛山","pinyin":"fushan","isHot":0},{"cityId":440700,"name":"江門","pinyin":"jiangmen","isHot":0},{"cityId":440800,"name":"湛江","pinyin":"zhanjiang","isHot":0},{"cityId":440900,"name":"茂名","pinyin":"maoming","isHot":0},{"cityId":441200,"name":"肇慶","pinyin":"zhaoqing","isHot":0},{"cityId":441300,"name":"惠州","pinyin":"huizhou","isHot":0},{"cityId":441400,"name":"梅州","pinyin":"meizhou","isHot":0},{"cityId":441500,"name":"汕尾","pinyin":"shanwei","isHot":0},{"cityId":441600,"name":"河源","pinyin":"heyuan","isHot":0},{"cityId":441700,"name":"陽江","pinyin":"yangjiang","isHot":0},{"cityId":441800,"name":"清遠","pinyin":"qingyuan","isHot":0},{"cityId":441900,"name":"東莞","pinyin":"dongguan","isHot":0},{"cityId":442000,"name":"中山","pinyin":"zhongshan","isHot":0},{"cityId":445100,"name":"潮州","pinyin":"chaozhou","isHot":0},{"cityId":445200,"name":"揭陽","pinyin":"jieyang","isHot":0},{"cityId":445300,"name":"雲浮","pinyin":"yunfu","isHot":0},{"cityId":450100,"name":"南寧","pinyin":"nanning","isHot":0},{"cityId":450200,"name":"柳州","pinyin":"liuzhou","isHot":0},{"cityId":450300,"name":"桂林","pinyin":"guilin","isHot":0},{"cityId":450400,"name":"梧州","pinyin":"wuzhou","isHot":0},{"cityId":450500,"name":"北海","pinyin":"beihai","isHot":0},{"cityId":450600,"name":"防城港","pinyin":"fangcheng","isHot":0},{"cityId":450700,"name":"欽州","pinyin":"qinzhou","isHot":0},{"cityId":450800,"name":"貴港","pinyin":"guigang","isHot":0},{"cityId":450900,"name":"玉林","pinyin":"yulin","isHot":0},{"cityId":451000,"name":"百色","pinyin":"baise","isHot":0},{"cityId":451100,"name":"賀州","pinyin":"hezhou","isHot":0},{"cityId":451200,"name":"河池","pinyin":"hechi","isHot":0},{"cityId":451300,"name":"來賓","pinyin":"laibin","isHot":0},{"cityId":451400,"name":"崇左","pinyin":"chongzuo","isHot":0},{"cityId":460100,"name":"海口","pinyin":"haikou","isHot":0},{"cityId":460200,"name":"三亞","pinyin":"sanya","isHot":0},{"cityId":460400,"name":"儋州","pinyin":"danzhou","isHot":0},{"cityId":469001,"name":"五指山","pinyin":"wuzhi","isHot":0},{"cityId":469002,"name":"瓊海","pinyin":"qionghai","isHot":0},{"cityId":469005,"name":"文昌","pinyin":"wenchang","isHot":0},{"cityId":469007,"name":"東方","pinyin":"dongfang","isHot":0},{"cityId":469022,"name":"屯昌縣","pinyin":"tunchang","isHot":0},{"cityId":469023,"name":"澄邁縣","pinyin":"chengmai","isHot":0},{"cityId":469024,"name":"臨高縣","pinyin":"lingao","isHot":0},{"cityId":469026,"name":"昌江黎族自治縣","pinyin":"changjiang","isHot":0},{"cityId":469027,"name":"樂東黎族自治縣","pinyin":"ledong","isHot":0},{"cityId":500100,"name":"重慶","pinyin":"chongqing","isHot":0},{"cityId":510100,"name":"成都","pinyin":"chengdou","isHot":0},{"cityId":510300,"name":"自貢","pinyin":"zigong","isHot":0},{"cityId":510400,"name":"攀枝花","pinyin":"panzhi","isHot":0},{"cityId":510500,"name":"瀘州","pinyin":"luzhou","isHot":0},{"cityId":510600,"name":"德陽","pinyin":"deyang","isHot":0},{"cityId":510700,"name":"綿陽","pinyin":"mianyang","isHot":0},{"cityId":510800,"name":"廣元","pinyin":"guangyuan","isHot":0},{"cityId":510900,"name":"遂寧","pinyin":"suining","isHot":0},{"cityId":511000,"name":"內江","pinyin":"neijiang","isHot":0},{"cityId":511100,"name":"樂山","pinyin":"leshan","isHot":0},{"cityId":511300,"name":"南充","pinyin":"nanchong","isHot":0},{"cityId":511400,"name":"眉山","pinyin":"meishan","isHot":0},{"cityId":511500,"name":"宜賓","pinyin":"yibin","isHot":0},{"cityId":511600,"name":"廣安","pinyin":"guangan","isHot":0},{"cityId":511700,"name":"達州","pinyin":"dazhou","isHot":0},{"cityId":511800,"name":"雅安","pinyin":"yaan","isHot":0},{"cityId":511900,"name":"巴中","pinyin":"bazhong","isHot":0},{"cityId":512000,"name":"資陽","pinyin":"ziyang","isHot":0},{"cityId":513400,"name":"涼山彝族自治州","pinyin":"liangshan","isHot":0},{"cityId":520100,"name":"貴陽","pinyin":"guiyang","isHot":0},{"cityId":520200,"name":"六盤水","pinyin":"liupan","isHot":0},{"cityId":520300,"name":"遵義","pinyin":"zunyi","isHot":0},{"cityId":520400,"name":"安順","pinyin":"anshun","isHot":0},{"cityId":520500,"name":"畢節","pinyin":"bijie","isHot":0},{"cityId":520600,"name":"銅仁","pinyin":"tongren","isHot":0},{"cityId":522300,"name":"黔西南布依族苗族自治州","pinyin":"qianxi","isHot":0},{"cityId":522600,"name":"黔東南苗族侗族自治州","pinyin":"qiandong","isHot":0},{"cityId":522700,"name":"黔南布依族苗族自治州","pinyin":"qiannan","isHot":0},{"cityId":530100,"name":"昆明","pinyin":"kunming","isHot":0},{"cityId":530300,"name":"曲靖","pinyin":"qujing","isHot":0},{"cityId":530400,"name":"玉溪","pinyin":"yuxi","isHot":0},{"cityId":530500,"name":"保山","pinyin":"baoshan","isHot":0},{"cityId":530600,"name":"昭通","pinyin":"zhaotong","isHot":0},{"cityId":530700,"name":"麗江","pinyin":"lijiang","isHot":0},{"cityId":530800,"name":"普洱","pinyin":"puer","isHot":0},{"cityId":532300,"name":"楚雄彝族自治州","pinyin":"chuxiong","isHot":0},{"cityId":532500,"name":"紅河哈尼族彝族自治州","pinyin":"honghe","isHot":0},{"cityId":532600,"name":"文山壯族苗族自治州","pinyin":"wenshan","isHot":0},{"cityId":532800,"name":"西雙版納傣族自治州","pinyin":"xishuang","isHot":0},{"cityId":532900,"name":"大理白族自治州","pinyin":"dali","isHot":0},{"cityId":540100,"name":"拉薩","pinyin":"lasa","isHot":0},{"cityId":610100,"name":"西安","pinyin":"xian","isHot":0},{"cityId":610200,"name":"銅川","pinyin":"tongchuan","isHot":0},{"cityId":610300,"name":"寶雞","pinyin":"baoji","isHot":0},{"cityId":610400,"name":"咸陽","pinyin":"xianyang","isHot":0},{"cityId":610500,"name":"渭南","pinyin":"weinan","isHot":0},{"cityId":610600,"name":"延安","pinyin":"yanan","isHot":0},{"cityId":610700,"name":"漢中","pinyin":"hanzhong","isHot":0},{"cityId":610800,"name":"榆林","pinyin":"yulin","isHot":0},{"cityId":610900,"name":"安康","pinyin":"ankang","isHot":0},{"cityId":611000,"name":"商洛","pinyin":"shangluo","isHot":0},{"cityId":620100,"name":"蘭州","pinyin":"lanzhou","isHot":0},{"cityId":620200,"name":"嘉峪關","pinyin":"jiayu","isHot":0},{"cityId":620400,"name":"白銀","pinyin":"baiyin","isHot":0},{"cityId":620600,"name":"武威","pinyin":"wuwei","isHot":0},{"cityId":620900,"name":"酒泉","pinyin":"jiuquan","isHot":0},{"cityId":621000,"name":"慶陽","pinyin":"qingyang","isHot":0},{"cityId":621100,"name":"定西","pinyin":"dingxi","isHot":0},{"cityId":621200,"name":"隴南","pinyin":"longnan","isHot":0},{"cityId":630100,"name":"西寧","pinyin":"xining","isHot":0},{"cityId":640100,"name":"銀川","pinyin":"yinchuan","isHot":0},{"cityId":640200,"name":"石嘴山","pinyin":"shizui","isHot":0},{"cityId":640300,"name":"吳忠","pinyin":"wuzhong","isHot":0},{"cityId":640400,"name":"固原","pinyin":"guyuan","isHot":0},{"cityId":640500,"name":"中衛","pinyin":"zhongwei","isHot":0},{"cityId":650100,"name":"烏魯木齊","pinyin":"wulu","isHot":0},{"cityId":650200,"name":"克拉瑪依","pinyin":"kela","isHot":0},{"cityId":650500,"name":"哈密","pinyin":"hami","isHot":0},{"cityId":320200,"name":"無錫","pinyin":"wuxi","isHot":0}]}
數據看似雜亂無章，還不符合UI的按首字母分組的要求，所以我們需要對數組加工。
需要改成這樣的格式 ：[{title: “A”, list:[{…}, {…}]},…此處忽略更多…,{title: “Z”, list:[{…}, {…}]}]
<mt-index-list>
<mt-index-section index="字母A">
<mt-cell title="字母a1"></mt-cell>
<mt-cell title="字母a2"></mt-cell>
</mt-index-section>
...此處忽略更多...
<mt-index-section index="字母Z">
<mt-cell title="字母z1"></mt-cell>
<mt-cell title="字母z2"></mt-cell>
</mt-index-section>
</mt-index-list>
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
<city :citylist="newcitylist"></city>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
citylist:[],
},
components: {
'city': {
props:['citylist'],
template:'<div><ul v-for="item in citylist"><span>{{item.title}}</span><li v-for="item1 in item.list">{{item1.name}}</li></ul></div>',
}
},
computed:{
newcitylist:function(){
//分組A-Z
let letter=[];
let k=0;
for (let i = 65; i <= 90; i++) {
letter[k]=String.fromCharCode(i);
k++;
}
//開始城市分組
let citylistarr=[];//創建數組
for (let i = 0; i < letter.length; i++) {
citylistarr[i]={};//創建對象A-Z
citylistarr[i]['title']=letter[i];//將字母賦值到title屬性
citylistarr[i]['list']=[];//創建該字母的城市數組
let x=0;//下標從0開始插入
for(let j = 0; j < this.citylist.length; j++) {
if(this.citylist[j].pinyin.substring(0,1).toUpperCase()==letter[i]){
citylistarr[i]['list'][x]=this.citylist[j];//將符合條件城市添加進數組
x++;//符合條件的遞增插入
}
}
}
return citylistarr;
}
},
mounted(){
this.getData();
},
methods:{
//獲取接口數據
getData() {
axios.get('http://localhost/VUE/city.json').then(
response => {
this.citylist=response.data.cities;
},
response => {
console.log("失敗");
}
);
}
}
})
</script>
</body>
</html>
運行結果如圖所示，搬到組件化開發裏使用吧！
