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


Posted in Javascript onAugust 16, 2017

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

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

项目截图

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

一、创建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;

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
用js实现放大镜效果
Oct 28 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 #Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 #Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 #Javascript
微信小程序自定义组件
Aug 16 #Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
You might like
php echo 输出字符串函数详解
2010/05/13 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php统计文章排行示例
2014/03/04 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
在Django中创建动态视图的教程
2015/07/15 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
教师听课学习心得体会
2016/01/15 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA