微信小程式中根據字母選擇城市

奮鬥年輕人發表於2017-07-28
微信小程式

http://www.wxapp-union.com/article-2774-1.html?utm_source=QQqun

今天開發一個小程式，裡面涉及到區域選擇，看了網上的一些版本，感覺寫的不全，有可能是我的理解能力還不夠吧。今天我就結合網上的答案，在根據自己的需求，重新整理一份。希望對大家有幫助。先看看截圖：

專案截圖 
下面我們把程式碼梳理一下。

一、建立index.wxml檔案

在pages->index資料夾下，新建index.wxml檔案，程式碼如下：

  2.  <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title">
  3.   <input< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title_list" value="{{cityName}}" placeholder="城市名稱" />
  4.   
  6. <scroll-view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;">   scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
  7.     <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
  8.       <text< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> id="{{idx}}" class="list_tit">{{idx}}
  9.       <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{{cityName}}">
  11.          <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}
  12.       
  13.     
  16. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;">  class="scroll_list" 
  17.       bindtouchstart="chStart"
  18.       bindtouchend="chEnd"
  19.       catchtouchmove="chMove"
  20.       style="background: rgba(0,0,0,{{trans}});"
  21.       >
  22.    <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
  23.       <block< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:if="{{idx != '熱門城市'}}">
  24.        <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}
  25.       
  26.     
  30. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> hidden="{{hidden}}" class="showwords">
  31.   {{showwords}}

二、建立對應的CSS

在pages->index資料夾下，新建index.wxss檔案，程式碼如下：

  1. /**index.wxss**/
  3. .title {
  4.     position: relative;
  5.     padding: 10px 0;
  6. }
  7. .title_list {
  8.     display: inline-block;
  9.     padding: 0 15px;
  10.     height: 20px;
  11.     line-height: 20px;
  12.     font-size: 16px;
  13. }
  14. .title button {
  15.     width: 50px;
  16.     height: 30px;
  17.     font-size: 16px;
  18.     padding: 0;
  19.     line-height: 30px;
  20.     margin: auto;
  21.     position: absolute;
  22.     top: 0;
  23.     bottom:0;
  24.     right: 10px;
  25.     background: none;
  26. }
  27. .title button::after {
  28.     border: none;
  29. }
  30. .title_list:nth-child(1) {
  31.     border-right:1px #ccc solid;
  32. }
  33. /*城市列表*/
  34. .city_list {
  35.     position: relative;
  36. }
  38. /*城市選擇頭部*/
  39. .list_tit {
  40.     display: block;
  41.     line-height: 40px;
  42.     height: 40px;
  43.     padding-left: 15px;
  44.     font-size: 16ppx;
  45.     background: #f5f5f5;
  46.     color: #666;
  47. }
  48. .list_con {
  49.     height: 40px;
  50.     /*border-top: 1px #f5f5f5 solid ;*/
  51.     line-height: 40px;
  52.     font-size: 16px;
  53.     padding-left: 15px;
  54. }
  55. .list_con::before {
  56.     content: " ";
  57.     height: 1px;
  58.     border-top: 1px #f5f5f5 solid;
  59.     position: absolute;
  60.     width: 100%;
  61. }
  62. .list_con::before:nth-child(1) {
  63.     border: none;
  64. }
  65. /*城市選擇 右邊*/
  66. .scroll_list {
  67.     background: rgba(0,0,0,0);
  68.     position: absolute;
  69.     height: calc(100% - 100px);
  70.     width: 25px;
  71.     top: 90px;
  72.     right: 10px;
  73. }
  74. .scroll_list_chi {
  75.     /*border: 1px blue solid;*/
  76.     text-align: center;
  77.     font-size: 12px;
  78. }
  79. /*顯示框*/
  81. .showwords {
  82.     width: 80px;
  83.     height: 80px;
  84.     background: rgba(0,0,0,.3);
  85.     border-radius:50%;
  86.     line-height: 80px;
  87.     text-align: center;
  88.     font-size:10vw;
  89.     margin: auto;
  90.     position: absolute;
  91.     top: 0;left: 0;bottom: 0;right: 0;
  92.     z-index: 999;   
  93. }

三、建立JS檔案

在pages->index資料夾下，新建index.js檔案，程式碼如下：

  1. //先引用城市資料檔案
  2. var city = require('../../utils/city.js')
  3. var lineHeight = 0;
  4. var endWords = "";
  5. var isNum;
  6. Page({
  7.   data: {
  8.     "hidden": true,
  9.     cityName:"", //獲取選中的城市名
  11.   },
  12.   onLoad: function (options) {
  13.     // 生命週期函式--監聽頁面載入
  16.   },
  17.   onReady: function () {
  18.     // 生命週期函式--監聽頁面初次渲染完成
  19.     var cityChild = city.City[0];
  20.     var that = this;
  21.     wx.getSystemInfo({
  22.       success: function (res) {
  23.         lineHeight = (res.windowHeight - 100) / 22;
  24.         console.log(res.windowHeight - 100)
  25.         that.setData({
  26.           city: cityChild,
  27.           winHeight: res.windowHeight - 40,
  28.           lineHeight: lineHeight
  29.         })
  30.       }
  31.     })
  32.   },
  33.   onShow: function () {
  34.     // 生命週期函式--監聽頁面顯示
  36.   },
  37.   onHide: function () {
  38.     // 生命週期函式--監聽頁面隱藏
  40.   },
  41.   onUnload: function () {
  42.     // 生命週期函式--監聽頁面解除安裝
  44.   },
  45.   //觸發全部開始選擇
  46.   chStart: function () {
  47.     this.setData({
  48.       trans: ".3",
  49.       hidden: false
  50.     })
  51.   },
  52.   //觸發結束選擇
  53.   chEnd: function () {
  54.     this.setData({
  55.       trans: "0",
  56.       hidden: true,
  57.       scrollTopId: this.endWords
  58.     })
  59.   },
  60.   //獲取文字資訊
  61.   getWords: function (e) {
  62.     var id = e.target.id;
  63.     this.endWords = id;
  64.     isNum = id;
  65.     this.setData({
  66.       showwords: this.endWords
  67.     })
  68.   },
  69.   //設定文字資訊
  70.   setWords: function (e) {
  71.     var id = e.target.id;
  72.     this.setData({
  73.       scrollTopId: id
  74.     })
  75.   },
  77.   // 滑動選擇城市
  78.   chMove: function (e) {
  79.     var y = e.touches[0].clientY;
  80.     var offsettop = e.currentTarget.offsetTop;
  81.     var height = 0;
  82.     var that = this;
  83.     ;
  84.     var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
  85.     // 獲取y軸最大值
  86.     wx.getSystemInfo({
  87.       success: function (res) {
  88.         height = res.windowHeight - 10;
  89.       }
  90.     });
  92.     //判斷選擇區域,只有在選擇區才會生效
  93.     if (y > offsettop && y < height) {
  94.       // console.log((y-offsettop)/lineHeight)
  95.       var num = parseInt((y - offsettop) / lineHeight);
  96.       endWords = cityarr[num];
  97.       // 這裡 把endWords 繫結到this 上，是為了手指離開事件獲取值
  98.       that.endWords = endWords;
  99.     };
  102.     //去除重複，為了防止每次移動都賦值 ,這裡限制值有變化後才會有賦值操作，
  103.     //DOTO 這裡暫時還有問題，還是比較卡，待優化
  104.     if (isNum != num) {
  105.       // console.log(isNum);
  106.       isNum = num;
  107.       that.setData({
  108.         showwords: that.endWords
  109.       })
  110.     }
  111.   },
  112.   //選擇城市，並讓選中的值顯示在文字框裡
  113.   bindCity: function(e) {
  114.     console.log(e);
  115.     var cityName = e.currentTarget.dataset.city;
  116.     this.setData({ cityName: cityName })
  118.   }
  120. })

四、建立城市檔案

在utils資料夾裡建立city.js檔案，具體程式碼如下：

  1. var city = {
  2.   "City": [
  3.     {
  4.       "熱門城市": [
  6.         {
  7.           "name": "北京",
  8.           "key": "熱門"
  9.         },
  10.         {
  11.           "name": "上海",
  12.           "key": "熱門"
  13.         },
  14.         {
  15.           "name": "廣州",
  16.           "key": "熱門"
  17.         },
  18.         {
  19.           "name": "深圳",
  20.           "key": "熱門"
  21.         },
  22.         {
  23.           "name": "成都",
  24.           "key": "熱門"
  25.         },
  27.         {
  28.           "name": "重慶",
  29.           "key": "熱門"
  30.         },
  31.         {
  32.           "name": "天津",
  33.           "key": "熱門"
  34.         },
  35.         {
  36.           "name": "杭州",
  37.           "key": "熱門"
  38.         },
  39.         {
  40.           "name": "南京",
  41.           "key": "熱門"
  42.         },
  43.         {
  44.           "name": "蘇州",
  45.           "key": "熱門"
  46.         },
  47.         {
  48.           "name": "武漢",
  49.           "key": "熱門"
  50.         },
  52.         {
  53.           "name": "西安",
  54.           "key": "熱門"
  55.         }
  57.       ],
  58.       "A": [
  59.         {
  60.           "name": "阿壩",
  61.           "key": "A"
  62.         },
  63.         {
  64.           "name": "阿拉善",
  65.           "key": "A"
  66.         },
  67.         {
  68.           "name": "阿里",
  69.           "key": "A"
  70.         },
  71.         {
  72.           "name": "安康",
  73.           "key": "A"
  74.         },
  75.         {
  76.           "name": "安慶",
  77.           "key": "A"
  78.         },
  80.         {
  81.           "name": "鞍山",
  82.           "key": "A"
  83.         }
  84.         ,
  85.         {
  86.           "name": "安順",
  87.           "key": "A"
  88.         }
  89.         ,
  90.         {
  91.           "name": "安陽",
  92.           "key": "A"
  93.         }
  94.         ,
  95.         {
  96.           "name": "澳門",
  97.           "key": "A"
  98.         }
  99.       ],
  100.       "B": [
  101.         {
  102.           "name": "北京",
  103.           "key": "B"
  104.         },
  105.         {
  106.           "name": "白銀",
  107.           "key": "B"
  108.         },
  109.         {
  110.           "name": "保定",
  111.           "key": "B"
  112.         },
  113.         {
  114.           "name": "寶雞",
  115.           "key": "B"
  116.         },
  117.         {
  118.           "name": "保山",
  119.           "key": "B"
  120.         },
  121.         {
  122.           "name": "包頭",
  123.           "key": "B"
  124.         },
  125.         {
  126.           "name": "巴中",
  127.           "key": "B"
  128.         }
  129.         ,
  130.         {
  131.           "name": "北海",
  132.           "key": "B"
  133.         }
  134.         ,
  135.         {
  136.           "name": "蚌埠",
  137.           "key": "B"
  138.         }
  139.         ,
  140.         {
  141.           "name": "本溪",
  142.           "key": "B"
  143.         }
  144.         ,
  145.         {
  146.           "name": "畢節",
  147.           "key": "B"
  148.         }
  149.         ,
  150.         {
  151.           "name": "濱州",
  152.           "key": "B"
  153.         }
  154.         ,
  155.         {
  156.           "name": "百色",
  157.           "key": "B"
  158.         }
  159.         ,
  160.         {
  161.           "name": "亳州",
  162.           "key": "B"
  163.         }
  164.       ],
  165.       "C": [
  166.         {
  167.           "name": "重慶",
  168.           "key": "C"
  169.         },
  170.         {
  171.           "name": "成都",
  172.           "key": "C"
  173.         },
  174.         {
  175.           "name": "長沙",
  176.           "key": "C"
  177.         },
  178.         {
  179.           "name": "長春",
  180.           "key": "C"
  181.         },
  182.         {
  183.           "name": "滄州",
  184.           "key": "C"
  185.         },
  186.         {
  187.           "name": "常德",
  188.           "key": "C"
  189.         },
  190.         {
  191.           "name": "昌都",
  192.           "key": "C"
  193.         }
  194.         ,
  195.         {
  196.           "name": "長治",
  197.           "key": "C"
  198.         }
  199.         ,
  200.         {
  201.           "name": "常州",
  202.           "key": "C"
  203.         }
  204.         ,
  205.         {
  206.           "name": "巢湖",
  207.           "key": "C"
  208.         }
  209.         ,
  210.         {
  211.           "name": "潮州",
  212.           "key": "C"
  213.         }
  214.         ,
  215.         {
  216.           "name": "承德",
  217.           "key": "C"
  218.         }
  219.         ,
  220.         {
  221.           "name": "郴州",
  222.           "key": "C"
  223.         }
  224.         ,
  225.         {
  226.           "name": "赤峰",
  227.           "key": "C"
  228.         }
  229.         ,
  230.         {
  231.           "name": "池州",
  232.           "key": "C"
  233.         }
  234.         ,
  235.         {
  236.           "name": "崇左",
  237.           "key": "C"
  238.         }
  239.         ,
  240.         {
  241.           "name": "楚雄",
  242.           "key": "C"
  243.         }
  244.         ,
  245.         {
  246.           "name": "滁州",
  247.           "key": "C"
  248.         }
  249.         ,
  250.         {
  251.           "name": "朝陽",
  252.           "key": "C"
  253.         }
  254.       ],
  255.       "D": [
  256.         {
  257.           "name": "大連",
  258.           "key": "D"
  259.         },
  260.         {
  261.           "name": "東莞",
  262.           "key": "D"
  263.         },
  264.         {
  265.           "name": "大理",
  266.           "key": "D"
  267.         },
  268.         {
  269.           "name": "丹東",
  270.           "key": "D"
  271.         },
  272.         {
  273.           "name": "大慶",
  274.           "key": "D"
  275.         },
  276.         {
  277.           "name": "大同",
  278.           "key": "D"
  279.         },
  280.         {
  281.           "name": "大興安嶺",
  282.           "key": "D"
  283.         }
  284.         ,
  285.         {
  286.           "name": "德巨集",
  287.           "key": "D"
  288.         }
  289.         ,
  290.         {
  291.           "name": "德陽",
  292.           "key": "D"
  293.         }
  294.         ,
  295.         {
  296.           "name": "德州",
  297.           "key": "D"
  298.         }
  299.         ,
  300.         {
  301.           "name": "定西",
  302.           "key": "D"
  303.         }
  304.         ,
  305.         {
  306.           "name": "迪慶",
  307.           "key": "D"
  308.         }
  309.         ,
  310.         {
  311.           "name": "東營",
  312.           "key": "D"
  313.         }
  315.       ],
  316.       "E": [
  317.         {
  318.           "name": "鄂爾多斯",
  319.           "key": "E"
  320.         }
  321.         ,
  322.         {
  323.           "name": "恩施",
  324.           "key": "E"
  325.         }
  326.         ,
  327.         {
  328.           "name": "鄂州",
  329.           "key": "E"
  330.         }
  331.       ],
  332.       "F": [
  333.         {
  334.           "name": "福州",
  335.           "key": "F"
  336.         }
  337.         ,
  338.         {
  339.           "name": "防城港",
  340.           "key": "F"
  341.         }
  342.         ,
  343.         {
  344.           "name": "佛山",
  345.           "key": "F"
  346.         }
  347.         ,
  348.         {
  349.           "name": "撫順",
  350.           "key": "F"
  351.         }
  352.         ,
  353.         {
  354.           "name": "撫州",
  355.           "key": "F"
  356.         }
  357.         ,
  358.         {
  359.           "name": "阜新",
  360.           "key": "F"
  361.         }
  362.         ,
  363.         {
  364.           "name": "阜陽",
  365.           "key": "F"
  366.         }
  367.       ]
  368.       ,
  369.       "G": [
  370.         {
  371.           "name": "廣州",
  372.           "key": "G"
  373.         },
  374.         {
  375.           "name": "贛州",
  376.           "key": "G"
  377.         },
  378.         {
  379.           "name": "桂林",
  380.           "key": "G"
  381.         },
  382.         {
  383.           "name": "貴陽",
  384.           "key": "G"
  385.         },
  386.         {
  387.           "name": "甘南",
  388.           "key": "G"
  389.         },
  391.         {
  392.           "name": "甘孜",
  393.           "key": "G"
  394.         },
  395.         {
  396.           "name": "廣安",
  397.           "key": "G"
  398.         }
  399.         ,
  400.         {
  401.           "name": "廣元",
  402.           "key": "G"
  403.         }
  404.         ,
  405.         {
  406.           "name": "果洛",
  407.           "key": "G"
  408.         }
  409.         ,
  410.         {
  411.           "name": "貴港",
  412.           "key": "G"
  413.         }
  415.       ],
  417.       "H": [
  418.         {
  419.           "name": "杭州",
  420.           "key": "H"
  421.         },
  422.         {
  423.           "name": "哈爾濱",
  424.           "key": "H"
  425.         },
  426.         {
  427.           "name": "合肥",
  428.           "key": "H"
  429.         },
  430.         {
  431.           "name": "海口",
  432.           "key": "H"
  433.         },
  434.         {
  435.           "name": "海東",
  436.           "key": "H"
  437.         },
  438.         {
  439.           "name": "海北",
  440.           "key": "H"
  441.         },
  442.         {
  443.           "name": "海南",
  444.           "key": "H"
  445.         }
  446.         ,
  447.         {
  448.           "name": "海西",
  449.           "key": "H"
  450.         }
  451.         ,
  452.         {
  453.           "name": "邯鄲",
  454.           "key": "H"
  455.         }
  457.         ,
  458.         {
  459.           "name": "漢中",
  460.           "key": "H"
  461.         }
  462.         ,
  463.         {
  464.           "name": "鶴壁",
  465.           "key": "H"
  466.         }
  467.         ,
  468.         {
  469.           "name": "河池",
  470.           "key": "H"
  471.         }
  472.         ,
  473.         {
  474.           "name": "鶴崗",
  475.           "key": "H"
  476.         }
  477.         ,
  478.         {
  479.           "name": "黑河",
  480.           "key": "H"
  481.         }
  482.         ,
  483.         {
  484.           "name": "衡水",
  485.           "key": "H"
  486.         }
  487.         ,
  488.         {
  489.           "name": "衡陽",
  490.           "key": "H"
  491.         }
  493.         ,
  494.         {
  495.           "name": "河源",
  496.           "key": "H"
  497.         }
  498.         ,
  499.         {
  500.           "name": "賀州",
  501.           "key": "H"
  502.         }
  503.         ,
  504.         {
  505.           "name": "紅河",
  506.           "key": "H"
  507.         }
  508.         ,
  509.         {
  510.           "name": "淮安",
  511.           "key": "H"
  512.         }
  513.         ,
  514.         {
  515.           "name": "淮北",
  516.           "key": "H"
  517.         }
  518.         ,
  519.         {
  520.           "name": "懷化",
  521.           "key": "H"
  522.         }
  523.         ,
  524.         {
  525.           "name": "淮南",
  526.           "key": "H"
  527.         }
  528.         ,
  530.         {
  531.           "name": "黃岡",
  532.           "key": "H"
  533.         }
  534.         ,
  535.         {
  536.           "name": "黃南",
  537.           "key": "H"
  538.         }
  539.         ,
  540.         {
  541.           "name": "黃山",
  542.           "key": "H"
  543.         },
  544.         {
  545.           "name": "黃石",
  546.           "key": "H"
  547.         },
  548.         {
  549.           "name": "惠州",
  550.           "key": "H"
  551.         },
  552.         {
  553.           "name": "葫蘆島",
  554.           "key": "H"
  555.         },
  556.         {
  557.           "name": "呼倫貝爾",
  558.           "key": "H"
  559.         },
  560.         {
  561.           "name": "湖州",
  562.           "key": "H"
  563.         }
  564.         ,
  565.         {
  566.           "name": "菏澤",
  567.           "key": "H"
  568.         }
  570.       ],
  571.       "J": [
  573.         {
  574.           "name": "濟南",
  575.           "key": "J"
  576.         },
  577.         {
  578.           "name": "佳木斯",
  579.           "key": "J"
  580.         },
  581.         {
  582.           "name": "吉安",
  583.           "key": "J"
  584.         },
  585.         {
  586.           "name": "江門",
  587.           "key": "J"
  588.         },
  589.         {
  590.           "name": "焦作",
  591.           "key": "J"
  592.         },
  593.         {
  594.           "name": "嘉興",
  595.           "key": "J"
  596.         },
  597.         {
  598.           "name": "嘉峪關",
  599.           "key": "J"
  600.         }
  601.         ,
  602.         {
  603.           "name": "揭陽",
  604.           "key": "J"
  605.         }
  606.         ,
  608.         {
  609.           "name": "吉林",
  610.           "key": "J"
  611.         }
  612.         ,
  613.         {
  614.           "name": "金昌",
  615.           "key": "J"
  616.         }
  617.         ,
  618.         {
  619.           "name": "晉城",
  620.           "key": "J"
  621.         }
  622.         ,
  623.         {
  624.           "name": "景德鎮",
  625.           "key": "J"
  626.         }
  627.         ,
  628.         {
  629.           "name": "荊門",
  630.           "key": "J"
  631.         }
  632.         ,
  633.         {
  634.           "name": "荊州",
  635.           "key": "J"
  636.         }
  637.         ,
  638.         {
  639.           "name": "金華",
  640.           "key": "J"
  641.         }
  643.         ,
  644.         {
  645.           "name": "濟寧",
  646.           "key": "J"
  647.         }
  648.         ,
  649.         {
  650.           "name": "晉中",
  651.           "key": "J"
  652.         }
  653.         ,
  654.         {
  655.           "name": "錦州",
  656.           "key": "J"
  657.         }
  658.         ,
  659.         {
  660.           "name": "九江",
  661.           "key": "J"
  662.         }
  663.         ,
  664.         {
  665.           "name": "酒泉",
  666.           "key": "J"
  667.         }
  668.       ]
  669.       ,
  670.       "K": [
  671.         {
  672.           "name": "昆明",
  673.           "key": "K"
  675.         }
  676.         ,
  677.         {
  679.           "name": "開封",
  680.           "key": "K"
  681.         }
  682.       ]
  683.       ,
  685.       "L": [
  686.         {
  687.           "name": "蘭州",
  688.           "key": "L"
  689.         },
  690.         {
  691.           "name": "拉薩",
  692.           "key": "L"
  693.         },
  694.         {
  695.           "name": "來賓",
  696.           "key": "L"
  697.         },
  698.         {
  699.           "name": "萊蕪",
  700.           "key": "L"
  701.         },
  702.         {
  703.           "name": "廊坊",
  704.           "key": "L"
  705.         },
  706.         {
  707.           "name": "樂山",
  708.           "key": "L"
  709.         },
  710.         {
  711.           "name": "涼山",
  712.           "key": "L"
  713.         }
  714.         ,
  715.         {
  716.           "name": "連雲港",
  717.           "key": "L"
  718.         }
  720.         ,
  721.         {
  722.           "name": "聊城",
  723.           "key": "L"
  724.         }
  726.         ,
  727.         {
  728.           "name": "遼陽",
  729.           "key": "L"
  730.         }
  731.         ,
  732.         {
  733.           "name": "遼源",
  734.           "key": "L"
  735.         }
  736.         ,
  737.         {
  738.           "name": "麗江",
  739.           "key": "L"
  740.         }
  741.         ,
  742.         {
  743.           "name": "臨滄",
  744.           "key": "L"
  745.         }
  746.         ,
  747.         {
  748.           "name": "臨汾",
  749.           "key": "L"
  750.         }
  751.         ,
  752.         {
  753.           "name": "臨夏",
  754.           "key": "L"
  755.         }
  756.         ,
  758.         {
  759.           "name": "臨沂",
  760.           "key": "L"
  761.         }
  763.         ,
  764.         {
  765.           "name": "林芝",
  766.           "key": "L"
  767.         }
  768.         ,
  769.         {
  770.           "name": "麗水",
  771.           "key": "L"
  772.         }
  773.         ,
  774.         {
  775.           "name": "六安",
  776.           "key": "L"
  777.         }
  778.         ,
  779.         {
  780.           "name": "六盤水",
  781.           "key": "L"
  782.         }
  783.         ,
  784.         {
  785.           "name": "柳州",
  786.           "key": "L"
  787.         }
  788.         ,
  789.         {
  790.           "name": "隴南",
  791.           "key": "L"
  792.         }
  793.         ,
  795.         {
  796.           "name": "龍巖",
  797.           "key": "L"
  798.         }
  799.         ,
  801.         {
  802.           "name": "婁底",
  803.           "key": "L"
  804.         }
  805.         ,
  806.         {
  807.           "name": "漯河",
  808.           "key": "L"
  809.         }
  810.         ,
  811.         {
  812.           "name": "洛陽",
  813.           "key": "L"
  814.         },
  815.         {
  816.           "name": "瀘州",
  817.           "key": "L"
  818.         },
  819.         {
  820.           "name": "呂梁",
  821.           "key": "L"
  822.         }
  824.       ],
  826.       "M": [
  827.         {
  828.           "name": "馬鞍山",
  829.           "key": "M"
  830.         }
  831.         ,
  832.         {
  833.           "name": "茂名",
  834.           "key": "M"
  835.         }
  836.         ,
  837.         {
  838.           "name": "眉山",
  839.           "key": "M"
  840.         }
  841.         ,
  842.         {
  843.           "name": "梅州",
  844.           "key": "M"
  845.         }
  846.         ,
  847.         {
  848.           "name": "綿陽",
  849.           "key": "M"
  850.         }
  851.         ,
  852.         {
  853.           "name": "牡丹江",
  854.           "key": "M"
  855.         }
  857.       ],
  858.       "N": [
  860.         {
  861.           "name": "南京",
  862.           "key": "N"
  863.         },
  864.         {
  865.           "name": "南昌",
  866.           "key": "N"
  867.         },
  868.         {
  869.           "name": "南寧",
  870.           "key": "N"
  871.         },
  872.         {
  873.           "name": "南充",
  874.           "key": "N"
  875.         },
  876.         {
  877.           "name": "南平",
  878.           "key": "N"
  879.         },
  880.         {
  881.           "name": "南通",
  882.           "key": "N"
  883.         },
  884.         {
  885.           "name": "南陽",
  886.           "key": "N"
  887.         }
  888.         ,
  889.         {
  890.           "name": "那曲",
  891.           "key": "N"
  892.         }
  894.         ,
  895.         {
  896.           "name": "內江",
  897.           "key": "N"
  898.         }
  899.         ,
  900.         {
  901.           "name": "寧德",
  902.           "key": "N"
  903.         }
  904.         ,
  905.         {
  906.           "name": "怒江",
  907.           "key": "N"
  908.         }
  911.       ],
  912.       "P": [
  914.         {
  915.           "name": "盤錦",
  916.           "key": "P"
  917.         }
  918.         ,
  919.         {
  920.           "name": "攀枝花",
  921.           "key": "P"
  922.         }
  923.         ,
  924.         {
  925.           "name": "平頂山",
  926.           "key": "P"
  927.         }
  928.         ,
  929.         {
  930.           "name": "平涼",
  931.           "key": "P"
  932.         }
  933.         ,
  934.         {
  935.           "name": "萍鄉",
  936.           "key": "P"
  937.         }
  938.         ,
  939.         {
  940.           "name": "莆田",
  941.           "key": "P"
  942.         }
  943.         ,
  944.         {
  945.           "name": "濮陽",
  946.           "key": "P"
  947.         }
  949.       ],
  950.       "Q": [
  952.         {
  953.           "name": "青島",
  954.           "key": "Q"
  955.         },
  956.         {
  957.           "name": "黔東南",
  958.           "key": "Q"
  959.         },
  960.         {
  961.           "name": "黔南",
  962.           "key": "Q"
  963.         },
  964.         {
  965.           "name": "黔西南",
  966.           "key": "Q"
  967.         },
  968.         {
  969.           "name": "慶陽",
  970.           "key": "Q"
  971.         },
  972.         {
  973.           "name": "清遠",
  974.           "key": "Q"
  975.         },
  976.         {
  977.           "name": "秦皇島",
  978.           "key": "Q"
  979.         }
  980.         ,
  981.         {
  982.           "name": "欽州",
  983.           "key": "Q"
  984.         }
  985.         ,
  986.         {
  987.           "name": "齊齊哈爾",
  988.           "key": "Q"
  989.         }
  990.         ,
  991.         {
  992.           "name": "泉州",
  993.           "key": "Q"
  994.         }
  995.         ,
  996.         {
  997.           "name": "曲靖",
  998.           "key": "Q"
  999.         }
  1000.         ,
  1001.         {
  1002.           "name": "衢州",
  1003.           "key": "Q"
  1004.         }
  1007.       ],
  1009.       "R": [
  1010.         {
  1011.           "name": "日喀則",
  1012.           "key": "R"
  1013.         },
  1014.         {
  1015.           "name": "日照",
  1016.           "key": "R"
  1017.         }
  1018.       ]
  1019.       ,
  1021.       "S": [
  1022.         {
  1023.           "name": "上海",
  1024.           "key": "S"
  1025.         },
  1026.         {
  1027.           "name": "深圳",
  1028.           "key": "S"
  1029.         },
  1030.         {
  1031.           "name": "蘇州",
  1032.           "key": "S"
  1033.         },
  1034.         {
  1035.           "name": "瀋陽",
  1036.           "key": "S"
  1037.         },
  1038.         {
  1039.           "name": "石家莊",
  1040.           "key": "S"
  1041.         },
  1042.         {
  1043.           "name": "三門峽",
  1044.           "key": "S"
  1045.         },
  1046.         {
  1047.           "name": "三明",
  1048.           "key": "S"
  1049.         }
  1050.         ,
  1051.         {
  1052.           "name": "三亞",
  1053.           "key": "S"
  1054.         }
  1056.         ,
  1057.         {
  1058.           "name": "商洛",
  1059.           "key": "S"
  1060.         }
  1062.         ,
  1063.         {
  1064.           "name": "商丘",
  1065.           "key": "S"
  1066.         }
  1067.         ,
  1068.         {
  1069.           "name": "上饒",
  1070.           "key": "S"
  1071.         }
  1072.         ,
  1073.         {
  1074.           "name": "山南",
  1075.           "key": "S"
  1076.         }
  1077.         ,
  1078.         {
  1079.           "name": "汕頭",
  1080.           "key": "S"
  1081.         }
  1082.         ,
  1083.         {
  1084.           "name": "汕尾",
  1085.           "key": "S"
  1086.         }
  1087.         ,
  1088.         {
  1089.           "name": "韶關",
  1090.           "key": "S"
  1091.         }
  1092.         ,
  1094.         {
  1095.           "name": "紹興",
  1096.           "key": "S"
  1097.         }
  1099.         ,
  1100.         {
  1101.           "name": "邵陽",
  1102.           "key": "S"
  1103.         }
  1104.         ,
  1105.         {
  1106.           "name": "十堰",
  1107.           "key": "S"
  1108.         }
  1109.         ,
  1110.         {
  1111.           "name": "朔州",
  1112.           "key": "S"
  1113.         }
  1114.         ,
  1115.         {
  1116.           "name": "四平",
  1117.           "key": "S"
  1118.         }
  1119.         ,
  1120.         {
  1121.           "name": "綏化",
  1122.           "key": "S"
  1123.         }
  1124.         ,
  1125.         {
  1126.           "name": "遂寧",
  1127.           "key": "S"
  1128.         }
  1129.         ,
  1131.         {
  1132.           "name": "隨州",
  1133.           "key": "S"
  1134.         }
  1135.         ,
  1137.         {
  1138.           "name": "婁底",
  1139.           "key": "S"
  1140.         }
  1141.         ,
  1142.         {
  1143.           "name": "宿遷",
  1144.           "key": "S"
  1145.         }
  1146.         ,
  1147.         {
  1148.           "name": "宿州",
  1149.           "key": "S"
  1150.         }
  1152.       ],
  1153.       "T": [
  1155.         {
  1156.           "name": "天津",
  1157.           "key": "T"
  1158.         },
  1159.         {
  1160.           "name": "太原",
  1161.           "key": "T"
  1162.         },
  1163.         {
  1164.           "name": "泰安",
  1165.           "key": "T"
  1166.         },
  1167.         {
  1168.           "name": "泰州",
  1169.           "key": "T"
  1170.         },
  1171.         {
  1172.           "name": "唐山",
  1173.           "key": "T"
  1174.         },
  1175.         {
  1176.           "name": "天水",
  1177.           "key": "T"
  1178.         },
  1179.         {
  1180.           "name": "鐵嶺",
  1181.           "key": "T"
  1182.         }
  1183.         ,
  1184.         {
  1185.           "name": "銅川",
  1186.           "key": "T"
  1187.         }
  1188.         ,
  1190.         {
  1191.           "name": "通化",
  1192.           "key": "T"
  1193.         }
  1194.         ,
  1195.         {
  1196.           "name": "通遼",
  1197.           "key": "T"
  1198.         }
  1199.         ,
  1200.         {
  1201.           "name": "銅陵",
  1202.           "key": "T"
  1203.         }
  1204.         ,
  1205.         {
  1206.           "name": "銅仁",
  1207.           "key": "T"
  1208.         }
  1209.         ,
  1210.         {
  1211.           "name": "臺灣",
  1212.           "key": "T"
  1213.         }
  1216.       ]
  1217.       ,
  1218.       "W": [
  1220.         {
  1221.           "name": "武漢",
  1222.           "key": "W"
  1223.         },
  1224.         {
  1225.           "name": "烏魯木齊",
  1226.           "key": "W"
  1227.         },
  1228.         {
  1229.           "name": "無錫",
  1230.           "key": "W"
  1231.         },
  1232.         {
  1233.           "name": "威海",
  1234.           "key": "W"
  1235.         },
  1236.         {
  1237.           "name": "濰坊",
  1238.           "key": "W"
  1239.         },
  1240.         {
  1241.           "name": "文山",
  1242.           "key": "W"
  1243.         },
  1244.         {
  1245.           "name": "溫州",
  1246.           "key": "W"
  1247.         }
  1248.         ,
  1249.         {
  1250.           "name": "烏海",
  1251.           "key": "W"
  1252.         }
  1253.         ,
  1255.         {
  1256.           "name": "蕪湖",
  1257.           "key": "W"
  1258.         }
  1259.         ,
  1260.         {
  1261.           "name": "烏蘭察布",
  1262.           "key": "W"
  1263.         }
  1264.         ,
  1265.         {
  1266.           "name": "武威",
  1267.           "key": "W"
  1268.         }
  1269.         ,
  1270.         {
  1271.           "name": "梧州",
  1272.           "key": "W"
  1273.         }
  1275.       ],
  1276.       "X": [
  1278.         {
  1279.           "name": "廈門",
  1280.           "key": "X"
  1281.         },
  1282.         {
  1283.           "name": "西安",
  1284.           "key": "X"
  1285.         },
  1286.         {
  1287.           "name": "西寧",
  1288.           "key": "X"
  1289.         },
  1290.         {
  1291.           "name": "襄樊",
  1292.           "key": "X"
  1293.         },
  1294.         {
  1295.           "name": "湘潭",
  1296.           "key": "X"
  1297.         },
  1298.         {
  1299.           "name": "湘西",
  1300.           "key": "X"
  1301.         },
  1302.         {
  1303.           "name": "咸寧",
  1304.           "key": "X"
  1305.         }
  1306.         ,
  1307.         {
  1308.           "name": "咸陽",
  1309.           "key": "X"
  1310.         }
  1311.         ,
  1313.         {
  1314.           "name": "孝感",
  1315.           "key": "X"
  1316.         }
  1317.         ,
  1318.         {
  1319.           "name": "邢臺",
  1320.           "key": "X"
  1321.         }
  1322.         ,
  1323.         {
  1324.           "name": "新鄉",
  1325.           "key": "X"
  1326.         }
  1327.         ,
  1328.         {
  1329.           "name": "信陽",
  1330.           "key": "X"
  1331.         }
  1332.         ,
  1333.         {
  1334.           "name": "新餘",
  1335.           "key": "X"
  1336.         }
  1337.         ,
  1338.         {
  1339.           "name": "忻州",
  1340.           "key": "X"
  1341.         }
  1342.         ,
  1343.         {
  1344.           "name": "西雙版納",
  1345.           "key": "X"
  1346.         }
  1348.         ,
  1349.         {
  1350.           "name": "宣城",
  1351.           "key": "X"
  1352.         }
  1353.         ,
  1355.         {
  1356.           "name": "許昌",
  1357.           "key": "X"
  1358.         }
  1359.         ,
  1360.         {
  1361.           "name": "徐州",
  1362.           "key": "X"
  1363.         }
  1364.         ,
  1365.         {
  1366.           "name": "香港",
  1367.           "key": "X"
  1368.         }
  1369.         ,
  1370.         {
  1371.           "name": "錫林郭勒",
  1372.           "key": "X"
  1373.         }
  1374.         ,
  1375.         {
  1376.           "name": "興安",
  1377.           "key": "X"
  1378.         }
  1379.       ]
  1380.       ,
  1381.       "Y": [
  1383.         {
  1384.           "name": "銀川",
  1385.           "key": "Y"
  1386.         },
  1387.         {
  1388.           "name": "雅安",
  1389.           "key": "Y"
  1390.         },
  1391.         {
  1392.           "name": "延安",
  1393.           "key": "Y"
  1394.         },
  1395.         {
  1396.           "name": "延邊",
  1397.           "key": "Y"
  1398.         },
  1399.         {
  1400.           "name": "鹽城",
  1401.           "key": "Y"
  1402.         },
  1403.         {
  1404.           "name": "陽江",
  1405.           "key": "Y"
  1406.         },
  1408.         {
  1409.           "name": "陽泉",
  1410.           "key": "Y"
  1411.         }
  1412.         ,
  1413.         {
  1414.           "name": "揚州",
  1415.           "key": "Y"
  1416.         }
  1417.         ,
  1419.         {
  1420.           "name": "煙臺",
  1421.           "key": "Y"
  1422.         }
  1423.         ,
  1424.         {
  1425.           "name": "宜賓",
  1426.           "key": "Y"
  1427.         }
  1428.         ,
  1429.         {
  1430.           "name": "宜昌",
  1431.           "key": "Y"
  1432.         }
  1433.         ,
  1434.         {
  1435.           "name": "宜春",
  1436.           "key": "Y"
  1437.         }
  1438.         ,
  1439.         {
  1440.           "name": "營口",
  1441.           "key": "Y"
  1442.         }
  1443.         ,
  1445.         {
  1446.           "name": "益陽",
  1447.           "key": "Y"
  1448.         }
  1449.         ,
  1450.         {
  1451.           "name": "永州",
  1452.           "key": "Y"
  1453.         }
  1455.         ,
  1456.         {
  1457.           "name": "岳陽",
  1458.           "key": "Y"
  1459.         }
  1460.         ,
  1462.         {
  1463.           "name": "榆林",
  1464.           "key": "Y"
  1465.         }
  1466.         ,
  1467.         {
  1468.           "name": "運城",
  1469.           "key": "Y"
  1470.         }
  1471.         ,
  1472.         {
  1473.           "name": "雲浮",
  1474.           "key": "Y"
  1475.         }
  1476.         ,
  1477.         {
  1478.           "name": "玉樹",
  1479.           "key": "Y"
  1480.         }
  1481.         ,
  1482.         {
  1483.           "name": "玉溪",
  1484.           "key": "Y"
  1485.         }
  1486.         ,
  1487.         {
  1488.           "name": "玉林",
  1489.           "key": "Y"
  1490.         }
  1492.       ],
  1494.       "Z": [
  1495.         {
  1496.           "name": "雜多縣",
  1497.           "key": "Z"
  1498.         },
  1499.         {
  1500.           "name": "贊皇縣",
  1501.           "key": "Z"
  1502.         },
  1503.         {
  1504.           "name": "棗強縣",
  1505.           "key": "Z"
  1506.         },
  1507.         {
  1508.           "name": "棗陽市",
  1509.           "key": "Z"
  1510.         },
  1511.         {
  1512.           "name": "棗莊",
  1513.           "key": "Z"
  1514.         },
  1515.         {
  1516.           "name": "澤庫縣",
  1517.           "key": "Z"
  1518.         },
  1519.         {
  1520.           "name": "增城市",
  1521.           "key": "Z"
  1522.         }
  1523.         ,
  1525.         {
  1526.           "name": "曾都區",
  1527.           "key": "Z"
  1528.         }
  1529.         ,
  1530.         {
  1531.           "name": "澤普縣",
  1532.           "key": "Z"
  1533.         }
  1535.         ,
  1536.         {
  1537.           "name": "澤州縣",
  1538.           "key": "Z"
  1539.         }
  1540.         ,
  1541.         {
  1542.           "name": "札達縣",
  1543.           "key": "Z"
  1544.         }
  1545.         ,
  1546.         {
  1547.           "name": "扎賚特旗",
  1548.           "key": "Z"
  1549.         }
  1550.         ,
  1551.         {
  1552.           "name": "扎蘭屯市",
  1553.           "key": "Z"
  1554.         }
  1555.         ,
  1556.         {
  1557.           "name": "扎魯特旗",
  1558.           "key": "Z"
  1559.         }
  1560.         ,
  1562.         {
  1563.           "name": "扎囊縣",
  1564.           "key": "Z"
  1565.         }
  1566.         ,
  1567.         {
  1568.           "name": "張北縣",
  1569.           "key": "Z"
  1570.         }
  1572.         ,
  1573.         {
  1574.           "name": "張店區",
  1575.           "key": "Z"
  1576.         }
  1577.         ,
  1578.         {
  1579.           "name": "章貢區",
  1580.           "key": "Z"
  1581.         }
  1582.         ,
  1583.         {
  1584.           "name": "張家港",
  1585.           "key": "Z"
  1586.         }
  1587.         ,
  1588.         {
  1589.           "name": "張家界",
  1590.           "key": "Z"
  1591.         }
  1592.         ,
  1593.         {
  1594.           "name": "張家口",
  1595.           "key": "Z"
  1596.         }
  1597.         ,
  1598.         {
  1599.           "name": "漳平市",
  1600.           "key": "Z"
  1601.         }
  1602.         ,
  1604.         {
  1605.           "name": "漳浦縣",
  1606.           "key": "Z"
  1607.         }
  1608.         ,
  1610.         {
  1611.           "name": "章丘市",
  1612.           "key": "Z"
  1613.         }
  1614.         ,
  1615.         {
  1616.           "name": "樟樹市",
  1617.           "key": "Z"
  1618.         }
  1619.         ,
  1620.         {
  1621.           "name": "張灣區",
  1622.           "key": "Z"
  1623.         },
  1624.         {
  1625.           "name": "彰武縣",
  1626.           "key": "Z"
  1627.         },
  1628.         {
  1629.           "name": "漳縣",
  1630.           "key": "Z"
  1631.         },
  1632.         {
  1633.           "name": "張掖",
  1634.           "key": "Z"
  1635.         },
  1636.         {
  1637.           "name": "漳州",
  1638.           "key": "Z"
  1639.         },
  1640.         {
  1641.           "name": "長子縣",
  1642.           "key": "Z"
  1643.         }
  1644.         ,
  1646.         {
  1647.           "name": "湛河區",
  1648.           "key": "Z"
  1649.         }
  1650.         ,
  1651.         {
  1652.           "name": "湛江",
  1653.           "key": "Z"
  1654.         }
  1655.         ,
  1657.         {
  1658.           "name": "站前區",
  1659.           "key": "Z"
  1660.         }
  1661.         ,
  1662.         {
  1663.           "name": "沾益縣",
  1664.           "key": "Z"
  1665.         }
  1666.         ,
  1667.         {
  1668.           "name": "詔安縣",
  1669.           "key": "Z"
  1670.         },
  1671.         {
  1672.           "name": "召陵區",
  1673.           "key": "Z"
  1674.         },
  1675.         {
  1676.           "name": "昭平縣",
  1677.           "key": "Z"
  1678.         },
  1679.         {
  1680.           "name": "肇慶",
  1681.           "key": "Z"
  1682.         },
  1683.         {
  1684.           "name": "昭通",
  1685.           "key": "Z"
  1686.         },
  1687.         {
  1688.           "name": "趙縣",
  1689.           "key": "Z"
  1690.         }
  1692.       ]
  1693.     }
  1694.   ]
  1695. }
  1696. module.exports = city;

以上就是全部程式碼，大家可以再自己的專案中部署，謝謝大家，歡迎大牛拍磚。

相關文章