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

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

項目截圖

下面我們把代碼梳理一下。

一、創建index.wxml文件

在pages->index文件夾下,新建index.wxml文件,代碼如下:

<!--index.wxml-->
 <view class="title">
  <input class="title_list" value="{{cityName}}" placeholder="城市名稱" />
  <button>確認</button>
</view>
<scroll-view   scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
    <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
      <text id="{{idx}}" class="list_tit">{{idx}}</text>
      <block wx:for="{{cityName}}">
<!-- 
這里我要講一下data-用法。
“data-”是事件的使用方式
bindtap是事件處理函數,在這里,我們希望通過點擊具體的城市名稱,然后在文本框中顯示對應的值。具體代碼后面再說
具體的解釋大家可以看官網:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
-->
         <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
      </block>
    </block>
</scroll-view>
<!--城市選擇列表-->
<view  class="scroll_list" 
      bindtouchstart="chStart"
      bindtouchend="chEnd"
      catchtouchmove="chMove"
      style="background: rgba(0,0,0,{{trans}});"
      >
   <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
      <block wx:if="{{idx != '熱門城市'}}">
       <view 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}}</view>
      </block>
    </block>
</view>

<!--選擇顯示-->
<view hidden="{{hidden}}" class="showwords">
  {{showwords}}
</view>

二、創建對應的CSS

在pages->index文件夾下,新建index.wxss文件,代碼如下:

/**index.wxss**/

.title {
    position: relative;
    padding: 10px 0;
}
.title_list {
    display: inline-block;
    padding: 0 15px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
}
.title button {
    width: 50px;
    height: 30px;
    font-size: 16px;
    padding: 0;
    line-height: 30px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom:0;
    right: 10px;
    background: none;
}
.title button::after {
    border: none;
}
.title_list:nth-child(1) {
    border-right:1px #ccc solid;
}
/*城市列表*/
.city_list {
    position: relative;
}

/*城市選擇頭部*/
.list_tit {
    display: block;
    line-height: 40px;
    height: 40px;
    padding-left: 15px;
    font-size: 16ppx;
    background: #f5f5f5;
    color: #666;
}
.list_con {
    height: 40px;
    /*border-top: 1px #f5f5f5 solid ;*/
    line-height: 40px;
    font-size: 16px;
    padding-left: 15px;
}
.list_con::before {
    content: " ";
    height: 1px;
    border-top: 1px #f5f5f5 solid;
    position: absolute;
    width: 100%;
}
.list_con::before:nth-child(1) {
    border: none;
}
/*城市選擇 右邊*/
.scroll_list {
    background: rgba(0,0,0,0);
    position: absolute;
    height: calc(100% - 100px);
    width: 25px;
    top: 90px;
    right: 10px;
}
.scroll_list_chi {
    /*border: 1px blue solid;*/
    text-align: center;
    font-size: 12px;
}
/*顯示框*/

.showwords {
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,.3);
    border-radius:50%;
    line-height: 80px;
    text-align: center;
    font-size:10vw;
    margin: auto;
    position: absolute;
    top: 0;left: 0;bottom: 0;right: 0;
    z-index: 999;   
}

三、創建JS文件

在pages->index文件夾下,新建index.js文件,代碼如下:

//先引用城市數據文件
var city = require('../../utils/city.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
  data: {
    "hidden": true,
    cityName:"", //獲取選中的城市名

  },
  onLoad: function (options) {
    // 生命周期函數--監聽頁面加載


  },
  onReady: function () {
    // 生命周期函數--監聽頁面初次渲染完成
    var cityChild = city.City[0];
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        lineHeight = (res.windowHeight - 100) / 22;
        console.log(res.windowHeight - 100)
        that.setData({
          city: cityChild,
          winHeight: res.windowHeight - 40,
          lineHeight: lineHeight
        })
      }
    })
  },
  onShow: function () {
    // 生命周期函數--監聽頁面顯示

  },
  onHide: function () {
    // 生命周期函數--監聽頁面隱藏

  },
  onUnload: function () {
    // 生命周期函數--監聽頁面卸載

  },
  //觸發全部開始選擇
  chStart: function () {
    this.setData({
      trans: ".3",
      hidden: false
    })
  },
  //觸發結束選擇
  chEnd: function () {
    this.setData({
      trans: "0",
      hidden: true,
      scrollTopId: this.endWords
    })
  },
  //獲取文字信息
  getWords: function (e) {
    var id = e.target.id;
    this.endWords = id;
    isNum = id;
    this.setData({
      showwords: this.endWords
    })
  },
  //設置文字信息
  setWords: function (e) {
    var id = e.target.id;
    this.setData({
      scrollTopId: id
    })
  },

  // 滑動選擇城市
  chMove: function (e) {
    var y = e.touches[0].clientY;
    var offsettop = e.currentTarget.offsetTop;
    var height = 0;
    var that = this;
    ;
    var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
    // 獲取y軸最大值
    wx.getSystemInfo({
      success: function (res) {
        height = res.windowHeight - 10;
      }
    });

    //判斷選擇區域,只有在選擇區才會生效
    if (y > offsettop && y < height) {
      // console.log((y-offsettop)/lineHeight)
      var num = parseInt((y - offsettop) / lineHeight);
      endWords = cityarr[num];
      // 這里 把endWords 綁定到this 上,是為了手指離開事件獲取值
      that.endWords = endWords;
    };


    //去除重復,為了防止每次移動都賦值 ,這里限制值有變化后才會有賦值操作,
    //DOTO 這里暫時還有問題,還是比較卡,待優化
    if (isNum != num) {
      // console.log(isNum);
      isNum = num;
      that.setData({
        showwords: that.endWords
      })
    }
  },
  //選擇城市,并讓選中的值顯示在文本框里
  bindCity: function(e) {
    console.log(e);
    var cityName = e.currentTarget.dataset.city;
    this.setData({ cityName: cityName })

  }

})

四、創建城市文件

在utils文件夾里創建city.js文件,具體代碼如下:

var city = {
  "City": [
    {
      "熱門城市": [

        {
          "name": "北京",
          "key": "熱門"
        },
        {
          "name": "上海",
          "key": "熱門"
        },
        {
          "name": "廣州",
          "key": "熱門"
        },
        {
          "name": "深圳",
          "key": "熱門"
        },
        {
          "name": "成都",
          "key": "熱門"
        },

        {
          "name": "重慶",
          "key": "熱門"
        },
        {
          "name": "天津",
          "key": "熱門"
        },
        {
          "name": "杭州",
          "key": "熱門"
        },
        {
          "name": "南京",
          "key": "熱門"
        },
        {
          "name": "蘇州",
          "key": "熱門"
        },
        {
          "name": "武漢",
          "key": "熱門"
        },

        {
          "name": "西安",
          "key": "熱門"
        }

      ],
      "A": [
        {
          "name": "阿壩",
          "key": "A"
        },
        {
          "name": "阿拉善",
          "key": "A"
        },
        {
          "name": "阿里",
          "key": "A"
        },
        {
          "name": "安康",
          "key": "A"
        },
        {
          "name": "安慶",
          "key": "A"
        },

        {
          "name": "鞍山",
          "key": "A"
        }
        ,
        {
          "name": "安順",
          "key": "A"
        }
        ,
        {
          "name": "安陽",
          "key": "A"
        }
        ,
        {
          "name": "澳門",
          "key": "A"
        }
      ],
      "B": [
        {
          "name": "北京",
          "key": "B"
        },
        {
          "name": "白銀",
          "key": "B"
        },
        {
          "name": "保定",
          "key": "B"
        },
        {
          "name": "寶雞",
          "key": "B"
        },
        {
          "name": "保山",
          "key": "B"
        },
        {
          "name": "包頭",
          "key": "B"
        },
        {
          "name": "巴中",
          "key": "B"
        }
        ,
        {
          "name": "北海",
          "key": "B"
        }
        ,
        {
          "name": "蚌埠",
          "key": "B"
        }
        ,
        {
          "name": "本溪",
          "key": "B"
        }
        ,
        {
          "name": "畢節",
          "key": "B"
        }
        ,
        {
          "name": "濱州",
          "key": "B"
        }
        ,
        {
          "name": "百色",
          "key": "B"
        }
        ,
        {
          "name": "亳州",
          "key": "B"
        }
      ],
      "C": [
        {
          "name": "重慶",
          "key": "C"
        },
        {
          "name": "成都",
          "key": "C"
        },
        {
          "name": "長沙",
          "key": "C"
        },
        {
          "name": "長春",
          "key": "C"
        },
        {
          "name": "滄州",
          "key": "C"
        },
        {
          "name": "常德",
          "key": "C"
        },
        {
          "name": "昌都",
          "key": "C"
        }
        ,
        {
          "name": "長治",
          "key": "C"
        }
        ,
        {
          "name": "常州",
          "key": "C"
        }
        ,
        {
          "name": "巢湖",
          "key": "C"
        }
        ,
        {
          "name": "潮州",
          "key": "C"
        }
        ,
        {
          "name": "承德",
          "key": "C"
        }
        ,
        {
          "name": "郴州",
          "key": "C"
        }
        ,
        {
          "name": "赤峰",
          "key": "C"
        }
        ,
        {
          "name": "池州",
          "key": "C"
        }
        ,
        {
          "name": "崇左",
          "key": "C"
        }
        ,
        {
          "name": "楚雄",
          "key": "C"
        }
        ,
        {
          "name": "滁州",
          "key": "C"
        }
        ,
        {
          "name": "朝陽",
          "key": "C"
        }
      ],
      "D": [
        {
          "name": "大連",
          "key": "D"
        },
        {
          "name": "東莞",
          "key": "D"
        },
        {
          "name": "大理",
          "key": "D"
        },
        {
          "name": "丹東",
          "key": "D"
        },
        {
          "name": "大慶",
          "key": "D"
        },
        {
          "name": "大同",
          "key": "D"
        },
        {
          "name": "大興安嶺",
          "key": "D"
        }
        ,
        {
          "name": "德宏",
          "key": "D"
        }
        ,
        {
          "name": "德陽",
          "key": "D"
        }
        ,
        {
          "name": "德州",
          "key": "D"
        }
        ,
        {
          "name": "定西",
          "key": "D"
        }
        ,
        {
          "name": "迪慶",
          "key": "D"
        }
        ,
        {
          "name": "東營",
          "key": "D"
        }

      ],
      "E": [
        {
          "name": "鄂爾多斯",
          "key": "E"
        }
        ,
        {
          "name": "恩施",
          "key": "E"
        }
        ,
        {
          "name": "鄂州",
          "key": "E"
        }
      ],
      "F": [
        {
          "name": "福州",
          "key": "F"
        }
        ,
        {
          "name": "防城港",
          "key": "F"
        }
        ,
        {
          "name": "佛山",
          "key": "F"
        }
        ,
        {
          "name": "撫順",
          "key": "F"
        }
        ,
        {
          "name": "撫州",
          "key": "F"
        }
        ,
        {
          "name": "阜新",
          "key": "F"
        }
        ,
        {
          "name": "阜陽",
          "key": "F"
        }
      ]
      ,
      "G": [
        {
          "name": "廣州",
          "key": "G"
        },
        {
          "name": "贛州",
          "key": "G"
        },
        {
          "name": "桂林",
          "key": "G"
        },
        {
          "name": "貴陽",
          "key": "G"
        },
        {
          "name": "甘南",
          "key": "G"
        },

        {
          "name": "甘孜",
          "key": "G"
        },
        {
          "name": "廣安",
          "key": "G"
        }
        ,
        {
          "name": "廣元",
          "key": "G"
        }
        ,
        {
          "name": "果洛",
          "key": "G"
        }
        ,
        {
          "name": "貴港",
          "key": "G"
        }

      ],

      "H": [
        {
          "name": "杭州",
          "key": "H"
        },
        {
          "name": "哈爾濱",
          "key": "H"
        },
        {
          "name": "合肥",
          "key": "H"
        },
        {
          "name": "海口",
          "key": "H"
        },
        {
          "name": "海東",
          "key": "H"
        },
        {
          "name": "海北",
          "key": "H"
        },
        {
          "name": "海南",
          "key": "H"
        }
        ,
        {
          "name": "海西",
          "key": "H"
        }
        ,
        {
          "name": "邯鄲",
          "key": "H"
        }

        ,
        {
          "name": "漢中",
          "key": "H"
        }
        ,
        {
          "name": "鶴壁",
          "key": "H"
        }
        ,
        {
          "name": "河池",
          "key": "H"
        }
        ,
        {
          "name": "鶴崗",
          "key": "H"
        }
        ,
        {
          "name": "黑河",
          "key": "H"
        }
        ,
        {
          "name": "衡水",
          "key": "H"
        }
        ,
        {
          "name": "衡陽",
          "key": "H"
        }

        ,
        {
          "name": "河源",
          "key": "H"
        }
        ,
        {
          "name": "賀州",
          "key": "H"
        }
        ,
        {
          "name": "紅河",
          "key": "H"
        }
        ,
        {
          "name": "淮安",
          "key": "H"
        }
        ,
        {
          "name": "淮北",
          "key": "H"
        }
        ,
        {
          "name": "懷化",
          "key": "H"
        }
        ,
        {
          "name": "淮南",
          "key": "H"
        }
        ,

        {
          "name": "黃岡",
          "key": "H"
        }
        ,
        {
          "name": "黃南",
          "key": "H"
        }
        ,
        {
          "name": "黃山",
          "key": "H"
        },
        {
          "name": "黃石",
          "key": "H"
        },
        {
          "name": "惠州",
          "key": "H"
        },
        {
          "name": "葫蘆島",
          "key": "H"
        },
        {
          "name": "呼倫貝爾",
          "key": "H"
        },
        {
          "name": "湖州",
          "key": "H"
        }
        ,
        {
          "name": "菏澤",
          "key": "H"
        }

      ],
      "J": [

        {
          "name": "濟南",
          "key": "J"
        },
        {
          "name": "佳木斯",
          "key": "J"
        },
        {
          "name": "吉安",
          "key": "J"
        },
        {
          "name": "江門",
          "key": "J"
        },
        {
          "name": "焦作",
          "key": "J"
        },
        {
          "name": "嘉興",
          "key": "J"
        },
        {
          "name": "嘉峪關",
          "key": "J"
        }
        ,
        {
          "name": "揭陽",
          "key": "J"
        }
        ,

        {
          "name": "吉林",
          "key": "J"
        }
        ,
        {
          "name": "金昌",
          "key": "J"
        }
        ,
        {
          "name": "晉城",
          "key": "J"
        }
        ,
        {
          "name": "景德鎮",
          "key": "J"
        }
        ,
        {
          "name": "荊門",
          "key": "J"
        }
        ,
        {
          "name": "荊州",
          "key": "J"
        }
        ,
        {
          "name": "金華",
          "key": "J"
        }

        ,
        {
          "name": "濟寧",
          "key": "J"
        }
        ,
        {
          "name": "晉中",
          "key": "J"
        }
        ,
        {
          "name": "錦州",
          "key": "J"
        }
        ,
        {
          "name": "九江",
          "key": "J"
        }
        ,
        {
          "name": "酒泉",
          "key": "J"
        }
      ]
      ,
      "K": [
        {
          "name": "昆明",
          "key": "K"

        }
        ,
        {

          "name": "開封",
          "key": "K"
        }
      ]
      ,

      "L": [
        {
          "name": "蘭州",
          "key": "L"
        },
        {
          "name": "拉薩",
          "key": "L"
        },
        {
          "name": "來賓",
          "key": "L"
        },
        {
          "name": "萊蕪",
          "key": "L"
        },
        {
          "name": "廊坊",
          "key": "L"
        },
        {
          "name": "樂山",
          "key": "L"
        },
        {
          "name": "涼山",
          "key": "L"
        }
        ,
        {
          "name": "連云港",
          "key": "L"
        }

        ,
        {
          "name": "聊城",
          "key": "L"
        }

        ,
        {
          "name": "遼陽",
          "key": "L"
        }
        ,
        {
          "name": "遼源",
          "key": "L"
        }
        ,
        {
          "name": "麗江",
          "key": "L"
        }
        ,
        {
          "name": "臨滄",
          "key": "L"
        }
        ,
        {
          "name": "臨汾",
          "key": "L"
        }
        ,
        {
          "name": "臨夏",
          "key": "L"
        }
        ,

        {
          "name": "臨沂",
          "key": "L"
        }

        ,
        {
          "name": "林芝",
          "key": "L"
        }
        ,
        {
          "name": "麗水",
          "key": "L"
        }
        ,
        {
          "name": "六安",
          "key": "L"
        }
        ,
        {
          "name": "六盤水",
          "key": "L"
        }
        ,
        {
          "name": "柳州",
          "key": "L"
        }
        ,
        {
          "name": "隴南",
          "key": "L"
        }
        ,

        {
          "name": "龍巖",
          "key": "L"
        }
        ,

        {
          "name": "婁底",
          "key": "L"
        }
        ,
        {
          "name": "漯河",
          "key": "L"
        }
        ,
        {
          "name": "洛陽",
          "key": "L"
        },
        {
          "name": "瀘州",
          "key": "L"
        },
        {
          "name": "呂梁",
          "key": "L"
        }

      ],

      "M": [
        {
          "name": "馬鞍山",
          "key": "M"
        }
        ,
        {
          "name": "茂名",
          "key": "M"
        }
        ,
        {
          "name": "眉山",
          "key": "M"
        }
        ,
        {
          "name": "梅州",
          "key": "M"
        }
        ,
        {
          "name": "綿陽",
          "key": "M"
        }
        ,
        {
          "name": "牡丹江",
          "key": "M"
        }

      ],
      "N": [

        {
          "name": "南京",
          "key": "N"
        },
        {
          "name": "南昌",
          "key": "N"
        },
        {
          "name": "南寧",
          "key": "N"
        },
        {
          "name": "南充",
          "key": "N"
        },
        {
          "name": "南平",
          "key": "N"
        },
        {
          "name": "南通",
          "key": "N"
        },
        {
          "name": "南陽",
          "key": "N"
        }
        ,
        {
          "name": "那曲",
          "key": "N"
        }

        ,
        {
          "name": "內江",
          "key": "N"
        }
        ,
        {
          "name": "寧德",
          "key": "N"
        }
        ,
        {
          "name": "怒江",
          "key": "N"
        }


      ],
      "P": [

        {
          "name": "盤錦",
          "key": "P"
        }
        ,
        {
          "name": "攀枝花",
          "key": "P"
        }
        ,
        {
          "name": "平頂山",
          "key": "P"
        }
        ,
        {
          "name": "平涼",
          "key": "P"
        }
        ,
        {
          "name": "萍鄉",
          "key": "P"
        }
        ,
        {
          "name": "莆田",
          "key": "P"
        }
        ,
        {
          "name": "濮陽",
          "key": "P"
        }

      ],
      "Q": [

        {
          "name": "青島",
          "key": "Q"
        },
        {
          "name": "黔東南",
          "key": "Q"
        },
        {
          "name": "黔南",
          "key": "Q"
        },
        {
          "name": "黔西南",
          "key": "Q"
        },
        {
          "name": "慶陽",
          "key": "Q"
        },
        {
          "name": "清遠",
          "key": "Q"
        },
        {
          "name": "秦皇島",
          "key": "Q"
        }
        ,
        {
          "name": "欽州",
          "key": "Q"
        }
        ,
        {
          "name": "齊齊哈爾",
          "key": "Q"
        }
        ,
        {
          "name": "泉州",
          "key": "Q"
        }
        ,
        {
          "name": "曲靖",
          "key": "Q"
        }
        ,
        {
          "name": "衢州",
          "key": "Q"
        }


      ],

      "R": [
        {
          "name": "日喀則",
          "key": "R"
        },
        {
          "name": "日照",
          "key": "R"
        }
      ]
      ,

      "S": [
        {
          "name": "上海",
          "key": "S"
        },
        {
          "name": "深圳",
          "key": "S"
        },
        {
          "name": "蘇州",
          "key": "S"
        },
        {
          "name": "沈陽",
          "key": "S"
        },
        {
          "name": "石家莊",
          "key": "S"
        },
        {
          "name": "三門峽",
          "key": "S"
        },
        {
          "name": "三明",
          "key": "S"
        }
        ,
        {
          "name": "三亞",
          "key": "S"
        }

        ,
        {
          "name": "商洛",
          "key": "S"
        }

        ,
        {
          "name": "商丘",
          "key": "S"
        }
        ,
        {
          "name": "上饒",
          "key": "S"
        }
        ,
        {
          "name": "山南",
          "key": "S"
        }
        ,
        {
          "name": "汕頭",
          "key": "S"
        }
        ,
        {
          "name": "汕尾",
          "key": "S"
        }
        ,
        {
          "name": "韶關",
          "key": "S"
        }
        ,

        {
          "name": "紹興",
          "key": "S"
        }

        ,
        {
          "name": "邵陽",
          "key": "S"
        }
        ,
        {
          "name": "十堰",
          "key": "S"
        }
        ,
        {
          "name": "朔州",
          "key": "S"
        }
        ,
        {
          "name": "四平",
          "key": "S"
        }
        ,
        {
          "name": "綏化",
          "key": "S"
        }
        ,
        {
          "name": "遂寧",
          "key": "S"
        }
        ,

        {
          "name": "隨州",
          "key": "S"
        }
        ,

        {
          "name": "婁底",
          "key": "S"
        }
        ,
        {
          "name": "宿遷",
          "key": "S"
        }
        ,
        {
          "name": "宿州",
          "key": "S"
        }

      ],
      "T": [

        {
          "name": "天津",
          "key": "T"
        },
        {
          "name": "太原",
          "key": "T"
        },
        {
          "name": "泰安",
          "key": "T"
        },
        {
          "name": "泰州",
          "key": "T"
        },
        {
          "name": "唐山",
          "key": "T"
        },
        {
          "name": "天水",
          "key": "T"
        },
        {
          "name": "鐵嶺",
          "key": "T"
        }
        ,
        {
          "name": "銅川",
          "key": "T"
        }
        ,

        {
          "name": "通化",
          "key": "T"
        }
        ,
        {
          "name": "通遼",
          "key": "T"
        }
        ,
        {
          "name": "銅陵",
          "key": "T"
        }
        ,
        {
          "name": "銅仁",
          "key": "T"
        }
        ,
        {
          "name": "臺灣",
          "key": "T"
        }


      ]
      ,
      "W": [

        {
          "name": "武漢",
          "key": "W"
        },
        {
          "name": "烏魯木齊",
          "key": "W"
        },
        {
          "name": "無錫",
          "key": "W"
        },
        {
          "name": "威海",
          "key": "W"
        },
        {
          "name": "濰坊",
          "key": "W"
        },
        {
          "name": "文山",
          "key": "W"
        },
        {
          "name": "溫州",
          "key": "W"
        }
        ,
        {
          "name": "烏海",
          "key": "W"
        }
        ,

        {
          "name": "蕪湖",
          "key": "W"
        }
        ,
        {
          "name": "烏蘭察布",
          "key": "W"
        }
        ,
        {
          "name": "武威",
          "key": "W"
        }
        ,
        {
          "name": "梧州",
          "key": "W"
        }

      ],
      "X": [

        {
          "name": "廈門",
          "key": "X"
        },
        {
          "name": "西安",
          "key": "X"
        },
        {
          "name": "西寧",
          "key": "X"
        },
        {
          "name": "襄樊",
          "key": "X"
        },
        {
          "name": "湘潭",
          "key": "X"
        },
        {
          "name": "湘西",
          "key": "X"
        },
        {
          "name": "咸寧",
          "key": "X"
        }
        ,
        {
          "name": "咸陽",
          "key": "X"
        }
        ,

        {
          "name": "孝感",
          "key": "X"
        }
        ,
        {
          "name": "邢臺",
          "key": "X"
        }
        ,
        {
          "name": "新鄉",
          "key": "X"
        }
        ,
        {
          "name": "信陽",
          "key": "X"
        }
        ,
        {
          "name": "新余",
          "key": "X"
        }
        ,
        {
          "name": "忻州",
          "key": "X"
        }
        ,
        {
          "name": "西雙版納",
          "key": "X"
        }

        ,
        {
          "name": "宣城",
          "key": "X"
        }
        ,

        {
          "name": "許昌",
          "key": "X"
        }
        ,
        {
          "name": "徐州",
          "key": "X"
        }
        ,
        {
          "name": "香港",
          "key": "X"
        }
        ,
        {
          "name": "錫林郭勒",
          "key": "X"
        }
        ,
        {
          "name": "興安",
          "key": "X"
        }
      ]
      ,
      "Y": [

        {
          "name": "銀川",
          "key": "Y"
        },
        {
          "name": "雅安",
          "key": "Y"
        },
        {
          "name": "延安",
          "key": "Y"
        },
        {
          "name": "延邊",
          "key": "Y"
        },
        {
          "name": "鹽城",
          "key": "Y"
        },
        {
          "name": "陽江",
          "key": "Y"
        },

        {
          "name": "陽泉",
          "key": "Y"
        }
        ,
        {
          "name": "揚州",
          "key": "Y"
        }
        ,

        {
          "name": "煙臺",
          "key": "Y"
        }
        ,
        {
          "name": "宜賓",
          "key": "Y"
        }
        ,
        {
          "name": "宜昌",
          "key": "Y"
        }
        ,
        {
          "name": "宜春",
          "key": "Y"
        }
        ,
        {
          "name": "營口",
          "key": "Y"
        }
        ,

        {
          "name": "益陽",
          "key": "Y"
        }
        ,
        {
          "name": "永州",
          "key": "Y"
        }

        ,
        {
          "name": "岳陽",
          "key": "Y"
        }
        ,

        {
          "name": "榆林",
          "key": "Y"
        }
        ,
        {
          "name": "運城",
          "key": "Y"
        }
        ,
        {
          "name": "云浮",
          "key": "Y"
        }
        ,
        {
          "name": "玉樹",
          "key": "Y"
        }
        ,
        {
          "name": "玉溪",
          "key": "Y"
        }
        ,
        {
          "name": "玉林",
          "key": "Y"
        }

      ],

      "Z": [
        {
          "name": "雜多縣",
          "key": "Z"
        },
        {
          "name": "贊皇縣",
          "key": "Z"
        },
        {
          "name": "棗強縣",
          "key": "Z"
        },
        {
          "name": "棗陽市",
          "key": "Z"
        },
        {
          "name": "棗莊",
          "key": "Z"
        },
        {
          "name": "澤庫縣",
          "key": "Z"
        },
        {
          "name": "增城市",
          "key": "Z"
        }
        ,

        {
          "name": "曾都區",
          "key": "Z"
        }
        ,
        {
          "name": "澤普縣",
          "key": "Z"
        }

        ,
        {
          "name": "澤州縣",
          "key": "Z"
        }
        ,
        {
          "name": "札達縣",
          "key": "Z"
        }
        ,
        {
          "name": "扎賚特旗",
          "key": "Z"
        }
        ,
        {
          "name": "扎蘭屯市",
          "key": "Z"
        }
        ,
        {
          "name": "扎魯特旗",
          "key": "Z"
        }
        ,

        {
          "name": "扎囊縣",
          "key": "Z"
        }
        ,
        {
          "name": "張北縣",
          "key": "Z"
        }

        ,
        {
          "name": "張店區",
          "key": "Z"
        }
        ,
        {
          "name": "章貢區",
          "key": "Z"
        }
        ,
        {
          "name": "張家港",
          "key": "Z"
        }
        ,
        {
          "name": "張家界",
          "key": "Z"
        }
        ,
        {
          "name": "張家口",
          "key": "Z"
        }
        ,
        {
          "name": "漳平市",
          "key": "Z"
        }
        ,

        {
          "name": "漳浦縣",
          "key": "Z"
        }
        ,

        {
          "name": "章丘市",
          "key": "Z"
        }
        ,
        {
          "name": "樟樹市",
          "key": "Z"
        }
        ,
        {
          "name": "張灣區",
          "key": "Z"
        },
        {
          "name": "彰武縣",
          "key": "Z"
        },
        {
          "name": "漳縣",
          "key": "Z"
        },
        {
          "name": "張掖",
          "key": "Z"
        },
        {
          "name": "漳州",
          "key": "Z"
        },
        {
          "name": "長子縣",
          "key": "Z"
        }
        ,

        {
          "name": "湛河區",
          "key": "Z"
        }
        ,
        {
          "name": "湛江",
          "key": "Z"
        }
        ,

        {
          "name": "站前區",
          "key": "Z"
        }
        ,
        {
          "name": "沾益縣",
          "key": "Z"
        }
        ,
        {
          "name": "詔安縣",
          "key": "Z"
        },
        {
          "name": "召陵區",
          "key": "Z"
        },
        {
          "name": "昭平縣",
          "key": "Z"
        },
        {
          "name": "肇慶",
          "key": "Z"
        },
        {
          "name": "昭通",
          "key": "Z"
        },
        {
          "name": "趙縣",
          "key": "Z"
        }

      ]
    }
  ]
}
module.exports = city;

以上就是全部代碼,大家可以再自己的項目中部署,謝謝大家,歡迎大牛拍磚。(o)/~
為了更好的服務大家,請加入我們的技術交流群:(511387930),同時您也可以掃描下方的二維碼關注我們的公眾號,每天我們都會分享經驗,謝謝大家。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容