最近遇到了一个新的需求，就是在项目中添加城市选择，小程序的城市选择也不是什么难点，网上也有很多的demo，主要是数据格式的不同，总结了一下，基本上属于两种结构。大部分demo都是引入所有的城市，大家在选择测试的时候可能觉得并不方便，所有我把数据抽取了部分出来，大家尝试后可以再对所有城市的数据进行封装，在网络上搜索的话基本上分为两种数据格式，多数如下第一种所示，第二种是根据接口需要更改的格式，同时前端也会使用两种不同的数据格式去渲染。
-
第一种
citys: [
{
"A": [
{
"name": "阿坝",
"key": "A"
},
{
"name": "阿拉善",
"key": "A"
},
],
"B": [
{
"name": "北京",
"key": "B"
},
{
"name": "白银",
"key": "B"
},
],
"C": [
{
"name": "重庆",
"key": "C"
},
{
"name": "成都",
"key": "C"
},
]
-
实现效果
城市选择1.gif
-
WXML
<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" wx:key="{{idx}}">
<text id="{{idx}}" class="list_tit">{{idx}}</text>
<block wx:for="{{cityName}}">
<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"
style="background: rgba(0,0,0,{{trans}});">
<view class="right-title">历史</view>
<view class="right-title">热门</view>
<block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
<view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:24rpx;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view>
</block>
</view>
<!--选择显示-->
<view hidden="{{hidden}}" class="showwords">
{{showwords}}
</view>
-
WXSS
/*城市列表*/
.city_list {
position: relative;
}
/*城市选择头部*/
.list_tit {
display: block;
line-height: 40px;
height: 40px;
padding-left: 15px;
font-size: 16ppx;
background: #f5f5f5;
color: #666;
}
.list_item {
height: 40px;
/*border-top: 1px #f5f5f5 solid ;*/
line-height: 40px;
font-size: 16px;
padding-left: 15px;
}
.list_item::before {
content: " ";
height: 1px;
border-top: 1px #f5f5f5 solid;
position: absolute;
width: 100%;
}
.list_item::before:nth-child(1) {
border: none;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0,0,0,0);
position: absolute;
width: 46rpx;
top: 100rpx;
right: 10px;
}
.scroll_list_chi {
text-align: center;
font-size: 22rpx;
color: rgb(99, 99, 99)
}
.right-title{
font-size:24rpx;
width:80rpx;
}
/*显示框*/
.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
city1封装的数据我会放在页面的最下方
//先引用城市数据文件
var city = require('../../utils/city1.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
data: {
"hidden": true,
cityName: "", //获取选中的城市名
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//初始化封装的城市数据
var cityChild = city.City[0];
console.log(cityChild)
var that = this;
wx.getSystemInfo({
success: function(res) {
//lineHeight是右侧A B C D的行高，这个可以根据需要自行设置，我在第二个demo中重新设置
lineHeight = (res.windowHeight - 100) / 22;
console.log(res.windowHeight - 100)
that.setData({
city: cityChild,
winHeight: res.windowHeight-2,
lineHeight: lineHeight
})
}
})
},
//触发全部开始选择
chStart: function() {
console.log('触发全部开始选择')
//trans是代表右侧字母列表背景的透明度，在演示中可以看到效果，
//点击右侧列表时呈现灰色背景，点击结束后透明度为0,同时显示页面最下面定义的showWords的显示
this.setData({
trans: ".3",
hidden: false
})
},
//触发结束选择
chEnd: function() {
console.log('触发结束选择')
this.setData({
trans: "0",
hidden: true,
scrollTopId: this.endWords
})
},
//获取文字信息
getWords: function(e) {
console.log('获取文字信息')
var id = e.target.id;
this.endWords = id;
isNum = id;
this.setData({
showwords: this.endWords
})
},
//设置文字信息
setWords: function(e) {
console.log('设置文字信息')
var id = e.target.id;
this.setData({
scrollTopId: id
})
},
//选择城市，并让选中的值显示在文本框里
bindCity: function(e) {
console.log(e.currentTarget.dataset.city);
var cityName = e.currentTarget.dataset.city;
wx.showToast({
title: '您选择了' + cityName,
})
}
})
-
第二种
citys: [{
"name": "A",
"list": [{
"cityCode": "320001",
"cityName": "阿坝"
},
{
"cityCode": "320002",
"cityName": "阿拉善"
},
]
},
{
"name": "B",
"list": [{
"cityCode": "130600",
"cityName": "保定市"
}]
},
{
"name": "C",
"list": [{
"cityCode": "130800",
"cityName": "承德市"
}]
},
-
数据格式二演示效果
一些必要的备注我都直接放在代码中了
城市选择2.gif
-
WXML
<scroll-view class="flex-left" scroll-y="true" scroll-into-view="{{scrollIntoId}}">
<view class='top-module'>
<view class='top-inner-box'>
<view class='hot-city-title'>国内热门城市</view>
<view class='list-one-line'>
<view class='one-box' wx:for="{{hotCitys}}" data-index="{{index}}" class="{{((index+1)%3) !=0 ?'one-box':'one-box-last'}}" catchtap='selectHotCity'>{{item.cityName}}</view>
</view>
</view>
</view>
<view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" class='city-list' catchtap='selectCity'>
<view class="item-title item-a" id="{{zimu.name}}" data-bigindex="{{bigindex}}">{{zimu.name}}</view>
<view class="item" wx:for="{{zimu.list}}" wx:key="item" wx:for-item="item" data-bigindex="{{bigindex}}" data-item="{{zimu}}" data-index='{{index}}'>{{item.cityName}}</view>
</view>
</scroll-view>
<view class="scroll_list" style='margin-top:{{(100-2.8*(citys.length))/4}}vh'>
<view class="scroll_list_chi">热</view>
<view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" bindtouchstart="touchstartfn">
<view class="scroll_list_chi" data-id="{{zimu.name}}" data-bigindex="{{bigindex}}" data-index='{{index}}'>{{zimu.name}}</view>
</view>
</view>
-
WXSS
/**index.wxss**/
page{
background: #F4F4F4;
}
.top-module{
width: 100vw;
height: auto;
}
.top-inner-box{
width: 96vw;
height: auto;
padding-left: 2vw;
padding-right: 2vw;
background: white;
}
.hot-city-title{
height: 8vh;
line-height: 8vh;
}
.list-one-line{
height: auto;
width: 84vw;
margin-left: 2vw;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.one-box{
height: 5vh;
width:25vw;
margin-right: 2.5vw;
display: flex;
align-items: center;
justify-content: center;
border:1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
.one-box-last{
height: 5vh;
width:25vw;
display: flex;
align-items: center;
justify-content: center;
border:1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
page{
height: 100%;
}
.zimu{
width: 50rpx;
height: 20px;
line-height: 20px;
}
.zimulist{
position: fixed;
top: 0;
right: 0;
bottom:0;
width: 50rpx;
z-index: 999999999999;
background-color: #fff;
text-align: center;
}
.item-title{
height: 48rpx;
line-height: 48rpx;
border-bottom: solid 1rpx #f0f1f2;
padding-left: 2vw;
color: #9A9A9A;
}
.item{
height:80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #D9D9D9;
margin-left: 3vw;
}
.item-a{
background-color: #f0f1f2;
}
.flex-wrap{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.flex-left{
width: 100vw;
height: 100%;
}
.flex-right{
width: 50rpx;
height: 100%;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0,0,0,0);
position: absolute;
width: 46rpx;
top: 100rpx;
right: 6rpx;
}
.city-list{
background: white;
}
.scroll_list_chi {
text-align: center;
font-size: 24rpx;
color: rgb(39, 39, 39);
height: 2.4vh;
}
.top-module>view{
font-size: 28rpx;
}
.city-list>view{
font-size: 28rpx;
}
-
JS
var app = getApp()
Page({
data: {
scrollIntoId: '',
hotCitys: [{
"cityCode": "130600",
"cityName": "保定市"
},
{
"cityCode": "140100",
"cityName": "太原市"
},
{
"cityCode": "150300",
"cityName": "乌海市"
},
{
"cityCode": "140400",
"cityName": "长治市"
},
{
"cityCode": "320100",
"cityName": "南京市"
},
{
"cityCode": "310000",
"cityName": "上海市"
}
],
citys: [{
"name": "A",
"list": [{
"cityCode": "320001",
"cityName": "阿坝"
},
{
"cityCode": "320002",
"cityName": "阿拉善"
},
{
"cityCode": "320003",
"cityName": "阿里"
},
{
"cityCode": "320004",
"cityName": "安康"
},
]
},
{
"name": "B",
"list": [{
"cityCode": "130600",
"cityName": "保定市"
}]
},
{
"name": "C",
"list": [{
"cityCode": "130800",
"cityName": "承德市"
}]
},
{
"name": "H",
"list": [{
"cityCode": "131100",
"cityName": "衡水市"
},
{
"cityCode": "320800",
"cityName": "淮安市"
}
]
},
{
"name": "M",
"list": [{
"cityCode": "231000",
"cityName": "牡丹江市"
}]
},
{
"name": "N",
"list": [{
"cityCode": "320100",
"cityName": "南京市"
}]
},
{
"name": "Q",
"list": [{
"cityCode": "130300",
"cityName": "秦皇岛市"
}]
},
{
"name": "S",
"list": [{
"cityCode": "310000",
"cityName": "上海市"
},
{
"cityCode": "130100",
"cityName": "石家庄市"
},
{
"cityCode": "320500",
"cityName": "苏州市"
}
]
},
{
"name": "T",
"list": [{
"cityCode": "140100",
"cityName": "太原市"
},
{
"cityCode": "130200",
"cityName": "唐山市"
}
]
},
{
"name": "W",
"list": [{
"cityCode": "150300",
"cityName": "乌海市"
}]
},
{
"name": "X",
"list": [{
"cityCode": "320300",
"cityName": "徐州市"
}]
},
{
"name": "Y",
"list": [{
"cityCode": "320900",
"cityName": "盐城市"
},
{
"cityCode": "321000",
"cityName": "扬州市"
},
{
"cityCode": "140300",
"cityName": "阳泉市"
}
]
},
{
"name": "Z",
"list": [{
"cityCode": "140400",
"cityName": "长治市"
},
{
"cityCode": "321100",
"cityName": "镇江市"
}
]
}
],
},
onShow: function() {
},
/**
* 右侧字母索引的触发
*/
touchstartfn: function (e) {
//console.log(e.target.id)
console.log(e);
var letter = e.target.dataset.id
var index = e.target.dataset.bigindex
var letter = this.data.citys[index].name
this.setData({
scrollIntoId: letter
})
wx.showToast({
icon: 'none',
title: letter
})
},
// 选择热门城市
selectHotCity: function(e) {
var that = this
console.log(e.currentTarget.dataset.index) //获取点击事件列表的索引
var index = e.currentTarget.dataset.index
var cityName = that.data.hotCitys[index].cityName //根据索引找到热门城市的名称
var cityCode = that.data.hotCitys[index].cityCode //根据索引找到热门城市的code编码
wx.showToast({
title: cityName,
})
},
//选择城市
selectCity: function(e) {
console.log(e)
var bigIndex = e.target.dataset.bigindex //嵌套循环找出外部的索引
var index = e.target.dataset.index //嵌套循环找出子索引
var zimu = this.data.citys[bigIndex].name //找到对应的字母
console.log(index)
console.log(zimu)
if (index == undefined) { //如果子索引为未定义，即点击了列表中的字母
wx.showToast({
title: zimu,
})
} else { //如果自索引有值，即点击了列表中的城市项
var cityName = this.data.citys[bigIndex].list[index].cityName //双重索引找到城市名称
var cityCode = this.data.citys[bigIndex].list[index].cityCode //双重索引找到城市编码
wx.showToast({
title: cityName,
})
}
},
})
-
补充第一种方法封装的城市JS
var city = {
"City": [{
"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;
这个只是我个人总结尝试出来的两种方案，还存在很多的不足之处，如果大家觉得有什么不合理的地方，欢迎评论指出或者添加qq交流。
guoguo.jpg
网友评论