微信小程序实现根据字母选择城市功能

今天开发一个小程序，里面涉及到区域选择，看了网上的一些版本，感觉写的不全，有可能是我的理解能力还不够吧。今天我就结合网上的答案，在根据自己的需求，重新整理一份。希望对大家有帮助。先看看截图：

项目截图

下面我们把代码梳理一下。

一、创建index.wxml文件

在pages->index文件夹下，新建index.wxml文件，代码如下：

 class="title">
  class="title_list" value="{{cityname}}" placeholder="城市名称" />
 确认
  scroll-y="true" style="height: {{winheight}}px;" scroll-into-view="{{scrolltopid}}" class="city_list">
   wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityname">
    id="{{idx}}" class="list_tit">{{idx}}
    wx:for="{{cityname}}">
     class="list_con" data-city="{{item.name}}" bindtap="bindcity">{{item.name}}
   
  
 class="scroll_list" 
   bindtouchstart="chstart"
   bindtouchend="chend"
   catchtouchmove="chmove"
   style="background: rgba(0,0,0,{{trans}});"
   >
  wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityname">
    wx:if="{{idx != '热门城市'}}">
    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}}
   
  
 hidden="{{hidden}}" class="showwords">
 {{showwords}}

二、创建对应的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;

以上就是全部代码，大家可以再自己的项目中部署。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。