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


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利用apply和arguments复用方法
Nov 25 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
php加密解密字符串示例
2016/10/13 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
二级域名转向类
2006/11/09 Javascript
js查错流程归纳
2012/05/04 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Django forms组件的使用教程
2018/10/08 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python Merge函数原理及用法解析
2020/09/16 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
大家访活动实施方案
2014/03/10 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
法人授权委托书公证范本
2014/09/14 职场文书