微信小程序中根据字母选择城市

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

项目截图

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

一、创建index.wxml文件

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

<!--index.wxml-->
 <view class="title">
  <input class="title_list" value="{{cityName}}" placeholder="城市名称" />
  <button>确认</button>
</view>
<scroll-view   scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
    <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
      <text id="{{idx}}" class="list_tit">{{idx}}</text>
      <block wx:for="{{cityName}}">
<!-- 
这里我要讲一下data-用法。
“data-”是事件的使用方式
bindtap是事件处理函数,在这里,我们希望通过点击具体的城市名称,然后在文本框中显示对应的值。具体代码后面再说
具体的解释大家可以看官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
-->
         <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
      </block>
    </block>
</scroll-view>
<!--城市选择列表-->
<view  class="scroll_list" 
      bindtouchstart="chStart"
      bindtouchend="chEnd"
      catchtouchmove="chMove"
      style="background: rgba(0,0,0,{{trans}});"
      >
   <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
      <block wx:if="{{idx != '热门城市'}}">
       <view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view>
      </block>
    </block>
</view>

<!--选择显示-->
<view hidden="{{hidden}}" class="showwords">
  {{showwords}}
</view>

二、创建对应的CSS

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

/**index.wxss**/

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

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

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

三、创建JS文件

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

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

  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载


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

  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏

  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载

  },
  //触发全部开始选择
  chStart: function () {
    this.setData({
      trans: ".3",
      hidden: false
    })
  },
  //触发结束选择
  chEnd: function () {
    this.setData({
      trans: "0",
      hidden: true,
      scrollTopId: this.endWords
    })
  },
  //获取文字信息
  getWords: function (e) {
    var id = e.target.id;
    this.endWords = id;
    isNum = id;
    this.setData({
      showwords: this.endWords
    })
  },
  //设置文字信息
  setWords: function (e) {
    var id = e.target.id;
    this.setData({
      scrollTopId: id
    })
  },

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

    //判断选择区域,只有在选择区才会生效
    if (y > offsettop && y < height) {
      // console.log((y-offsettop)/lineHeight)
      var num = parseInt((y - offsettop) / lineHeight);
      endWords = cityarr[num];
      // 这里 把endWords 绑定到this 上,是为了手指离开事件获取值
      that.endWords = endWords;
    };


    //去除重复,为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作,
    //DOTO 这里暂时还有问题,还是比较卡,待优化
    if (isNum != num) {
      // console.log(isNum);
      isNum = num;
      that.setData({
        showwords: that.endWords
      })
    }
  },
  //选择城市,并让选中的值显示在文本框里
  bindCity: function(e) {
    console.log(e);
    var cityName = e.currentTarget.dataset.city;
    this.setData({ cityName: cityName })

  }

})

四、创建城市文件

在utils文件夹里创建city.js文件,具体代码如下:

var city = {
  "City": [
    {
      "热门城市": [

        {
          "name": "北京",
          "key": "热门"
        },
        {
          "name": "上海",
          "key": "热门"
        },
        {
          "name": "广州",
          "key": "热门"
        },
        {
          "name": "深圳",
          "key": "热门"
        },
        {
          "name": "成都",
          "key": "热门"
        },

        {
          "name": "重庆",
          "key": "热门"
        },
        {
          "name": "天津",
          "key": "热门"
        },
        {
          "name": "杭州",
          "key": "热门"
        },
        {
          "name": "南京",
          "key": "热门"
        },
        {
          "name": "苏州",
          "key": "热门"
        },
        {
          "name": "武汉",
          "key": "热门"
        },

        {
          "name": "西安",
          "key": "热门"
        }

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

        {
          "name": "鞍山",
          "key": "A"
        }
        ,
        {
          "name": "安顺",
          "key": "A"
        }
        ,
        {
          "name": "安阳",
          "key": "A"
        }
        ,
        {
          "name": "澳门",
          "key": "A"
        }
      ],
      "B": [
        {
          "name": "北京",
          "key": "B"
        },
        {
          "name": "白银",
          "key": "B"
        },
        {
          "name": "保定",
          "key": "B"
        },
        {
          "name": "宝鸡",
          "key": "B"
        },
        {
          "name": "保山",
          "key": "B"
        },
        {
          "name": "包头",
          "key": "B"
        },
        {
          "name": "巴中",
          "key": "B"
        }
        ,
        {
          "name": "北海",
          "key": "B"
        }
        ,
        {
          "name": "蚌埠",
          "key": "B"
        }
        ,
        {
          "name": "本溪",
          "key": "B"
        }
        ,
        {
          "name": "毕节",
          "key": "B"
        }
        ,
        {
          "name": "滨州",
          "key": "B"
        }
        ,
        {
          "name": "百色",
          "key": "B"
        }
        ,
        {
          "name": "亳州",
          "key": "B"
        }
      ],
      "C": [
        {
          "name": "重庆",
          "key": "C"
        },
        {
          "name": "成都",
          "key": "C"
        },
        {
          "name": "长沙",
          "key": "C"
        },
        {
          "name": "长春",
          "key": "C"
        },
        {
          "name": "沧州",
          "key": "C"
        },
        {
          "name": "常德",
          "key": "C"
        },
        {
          "name": "昌都",
          "key": "C"
        }
        ,
        {
          "name": "长治",
          "key": "C"
        }
        ,
        {
          "name": "常州",
          "key": "C"
        }
        ,
        {
          "name": "巢湖",
          "key": "C"
        }
        ,
        {
          "name": "潮州",
          "key": "C"
        }
        ,
        {
          "name": "承德",
          "key": "C"
        }
        ,
        {
          "name": "郴州",
          "key": "C"
        }
        ,
        {
          "name": "赤峰",
          "key": "C"
        }
        ,
        {
          "name": "池州",
          "key": "C"
        }
        ,
        {
          "name": "崇左",
          "key": "C"
        }
        ,
        {
          "name": "楚雄",
          "key": "C"
        }
        ,
        {
          "name": "滁州",
          "key": "C"
        }
        ,
        {
          "name": "朝阳",
          "key": "C"
        }
      ],
      "D": [
        {
          "name": "大连",
          "key": "D"
        },
        {
          "name": "东莞",
          "key": "D"
        },
        {
          "name": "大理",
          "key": "D"
        },
        {
          "name": "丹东",
          "key": "D"
        },
        {
          "name": "大庆",
          "key": "D"
        },
        {
          "name": "大同",
          "key": "D"
        },
        {
          "name": "大兴安岭",
          "key": "D"
        }
        ,
        {
          "name": "德宏",
          "key": "D"
        }
        ,
        {
          "name": "德阳",
          "key": "D"
        }
        ,
        {
          "name": "德州",
          "key": "D"
        }
        ,
        {
          "name": "定西",
          "key": "D"
        }
        ,
        {
          "name": "迪庆",
          "key": "D"
        }
        ,
        {
          "name": "东营",
          "key": "D"
        }

      ],
      "E": [
        {
          "name": "鄂尔多斯",
          "key": "E"
        }
        ,
        {
          "name": "恩施",
          "key": "E"
        }
        ,
        {
          "name": "鄂州",
          "key": "E"
        }
      ],
      "F": [
        {
          "name": "福州",
          "key": "F"
        }
        ,
        {
          "name": "防城港",
          "key": "F"
        }
        ,
        {
          "name": "佛山",
          "key": "F"
        }
        ,
        {
          "name": "抚顺",
          "key": "F"
        }
        ,
        {
          "name": "抚州",
          "key": "F"
        }
        ,
        {
          "name": "阜新",
          "key": "F"
        }
        ,
        {
          "name": "阜阳",
          "key": "F"
        }
      ]
      ,
      "G": [
        {
          "name": "广州",
          "key": "G"
        },
        {
          "name": "赣州",
          "key": "G"
        },
        {
          "name": "桂林",
          "key": "G"
        },
        {
          "name": "贵阳",
          "key": "G"
        },
        {
          "name": "甘南",
          "key": "G"
        },

        {
          "name": "甘孜",
          "key": "G"
        },
        {
          "name": "广安",
          "key": "G"
        }
        ,
        {
          "name": "广元",
          "key": "G"
        }
        ,
        {
          "name": "果洛",
          "key": "G"
        }
        ,
        {
          "name": "贵港",
          "key": "G"
        }

      ],

      "H": [
        {
          "name": "杭州",
          "key": "H"
        },
        {
          "name": "哈尔滨",
          "key": "H"
        },
        {
          "name": "合肥",
          "key": "H"
        },
        {
          "name": "海口",
          "key": "H"
        },
        {
          "name": "海东",
          "key": "H"
        },
        {
          "name": "海北",
          "key": "H"
        },
        {
          "name": "海南",
          "key": "H"
        }
        ,
        {
          "name": "海西",
          "key": "H"
        }
        ,
        {
          "name": "邯郸",
          "key": "H"
        }

        ,
        {
          "name": "汉中",
          "key": "H"
        }
        ,
        {
          "name": "鹤壁",
          "key": "H"
        }
        ,
        {
          "name": "河池",
          "key": "H"
        }
        ,
        {
          "name": "鹤岗",
          "key": "H"
        }
        ,
        {
          "name": "黑河",
          "key": "H"
        }
        ,
        {
          "name": "衡水",
          "key": "H"
        }
        ,
        {
          "name": "衡阳",
          "key": "H"
        }

        ,
        {
          "name": "河源",
          "key": "H"
        }
        ,
        {
          "name": "贺州",
          "key": "H"
        }
        ,
        {
          "name": "红河",
          "key": "H"
        }
        ,
        {
          "name": "淮安",
          "key": "H"
        }
        ,
        {
          "name": "淮北",
          "key": "H"
        }
        ,
        {
          "name": "怀化",
          "key": "H"
        }
        ,
        {
          "name": "淮南",
          "key": "H"
        }
        ,

        {
          "name": "黄冈",
          "key": "H"
        }
        ,
        {
          "name": "黄南",
          "key": "H"
        }
        ,
        {
          "name": "黄山",
          "key": "H"
        },
        {
          "name": "黄石",
          "key": "H"
        },
        {
          "name": "惠州",
          "key": "H"
        },
        {
          "name": "葫芦岛",
          "key": "H"
        },
        {
          "name": "呼伦贝尔",
          "key": "H"
        },
        {
          "name": "湖州",
          "key": "H"
        }
        ,
        {
          "name": "菏泽",
          "key": "H"
        }

      ],
      "J": [

        {
          "name": "济南",
          "key": "J"
        },
        {
          "name": "佳木斯",
          "key": "J"
        },
        {
          "name": "吉安",
          "key": "J"
        },
        {
          "name": "江门",
          "key": "J"
        },
        {
          "name": "焦作",
          "key": "J"
        },
        {
          "name": "嘉兴",
          "key": "J"
        },
        {
          "name": "嘉峪关",
          "key": "J"
        }
        ,
        {
          "name": "揭阳",
          "key": "J"
        }
        ,

        {
          "name": "吉林",
          "key": "J"
        }
        ,
        {
          "name": "金昌",
          "key": "J"
        }
        ,
        {
          "name": "晋城",
          "key": "J"
        }
        ,
        {
          "name": "景德镇",
          "key": "J"
        }
        ,
        {
          "name": "荆门",
          "key": "J"
        }
        ,
        {
          "name": "荆州",
          "key": "J"
        }
        ,
        {
          "name": "金华",
          "key": "J"
        }

        ,
        {
          "name": "济宁",
          "key": "J"
        }
        ,
        {
          "name": "晋中",
          "key": "J"
        }
        ,
        {
          "name": "锦州",
          "key": "J"
        }
        ,
        {
          "name": "九江",
          "key": "J"
        }
        ,
        {
          "name": "酒泉",
          "key": "J"
        }
      ]
      ,
      "K": [
        {
          "name": "昆明",
          "key": "K"

        }
        ,
        {

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

      "L": [
        {
          "name": "兰州",
          "key": "L"
        },
        {
          "name": "拉萨",
          "key": "L"
        },
        {
          "name": "来宾",
          "key": "L"
        },
        {
          "name": "莱芜",
          "key": "L"
        },
        {
          "name": "廊坊",
          "key": "L"
        },
        {
          "name": "乐山",
          "key": "L"
        },
        {
          "name": "凉山",
          "key": "L"
        }
        ,
        {
          "name": "连云港",
          "key": "L"
        }

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

        ,
        {
          "name": "辽阳",
          "key": "L"
        }
        ,
        {
          "name": "辽源",
          "key": "L"
        }
        ,
        {
          "name": "丽江",
          "key": "L"
        }
        ,
        {
          "name": "临沧",
          "key": "L"
        }
        ,
        {
          "name": "临汾",
          "key": "L"
        }
        ,
        {
          "name": "临夏",
          "key": "L"
        }
        ,

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

        ,
        {
          "name": "林芝",
          "key": "L"
        }
        ,
        {
          "name": "丽水",
          "key": "L"
        }
        ,
        {
          "name": "六安",
          "key": "L"
        }
        ,
        {
          "name": "六盘水",
          "key": "L"
        }
        ,
        {
          "name": "柳州",
          "key": "L"
        }
        ,
        {
          "name": "陇南",
          "key": "L"
        }
        ,

        {
          "name": "龙岩",
          "key": "L"
        }
        ,

        {
          "name": "娄底",
          "key": "L"
        }
        ,
        {
          "name": "漯河",
          "key": "L"
        }
        ,
        {
          "name": "洛阳",
          "key": "L"
        },
        {
          "name": "泸州",
          "key": "L"
        },
        {
          "name": "吕梁",
          "key": "L"
        }

      ],

      "M": [
        {
          "name": "马鞍山",
          "key": "M"
        }
        ,
        {
          "name": "茂名",
          "key": "M"
        }
        ,
        {
          "name": "眉山",
          "key": "M"
        }
        ,
        {
          "name": "梅州",
          "key": "M"
        }
        ,
        {
          "name": "绵阳",
          "key": "M"
        }
        ,
        {
          "name": "牡丹江",
          "key": "M"
        }

      ],
      "N": [

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

        ,
        {
          "name": "内江",
          "key": "N"
        }
        ,
        {
          "name": "宁德",
          "key": "N"
        }
        ,
        {
          "name": "怒江",
          "key": "N"
        }


      ],
      "P": [

        {
          "name": "盘锦",
          "key": "P"
        }
        ,
        {
          "name": "攀枝花",
          "key": "P"
        }
        ,
        {
          "name": "平顶山",
          "key": "P"
        }
        ,
        {
          "name": "平凉",
          "key": "P"
        }
        ,
        {
          "name": "萍乡",
          "key": "P"
        }
        ,
        {
          "name": "莆田",
          "key": "P"
        }
        ,
        {
          "name": "濮阳",
          "key": "P"
        }

      ],
      "Q": [

        {
          "name": "青岛",
          "key": "Q"
        },
        {
          "name": "黔东南",
          "key": "Q"
        },
        {
          "name": "黔南",
          "key": "Q"
        },
        {
          "name": "黔西南",
          "key": "Q"
        },
        {
          "name": "庆阳",
          "key": "Q"
        },
        {
          "name": "清远",
          "key": "Q"
        },
        {
          "name": "秦皇岛",
          "key": "Q"
        }
        ,
        {
          "name": "钦州",
          "key": "Q"
        }
        ,
        {
          "name": "齐齐哈尔",
          "key": "Q"
        }
        ,
        {
          "name": "泉州",
          "key": "Q"
        }
        ,
        {
          "name": "曲靖",
          "key": "Q"
        }
        ,
        {
          "name": "衢州",
          "key": "Q"
        }


      ],

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

      "S": [
        {
          "name": "上海",
          "key": "S"
        },
        {
          "name": "深圳",
          "key": "S"
        },
        {
          "name": "苏州",
          "key": "S"
        },
        {
          "name": "沈阳",
          "key": "S"
        },
        {
          "name": "石家庄",
          "key": "S"
        },
        {
          "name": "三门峡",
          "key": "S"
        },
        {
          "name": "三明",
          "key": "S"
        }
        ,
        {
          "name": "三亚",
          "key": "S"
        }

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

        ,
        {
          "name": "商丘",
          "key": "S"
        }
        ,
        {
          "name": "上饶",
          "key": "S"
        }
        ,
        {
          "name": "山南",
          "key": "S"
        }
        ,
        {
          "name": "汕头",
          "key": "S"
        }
        ,
        {
          "name": "汕尾",
          "key": "S"
        }
        ,
        {
          "name": "韶关",
          "key": "S"
        }
        ,

        {
          "name": "绍兴",
          "key": "S"
        }

        ,
        {
          "name": "邵阳",
          "key": "S"
        }
        ,
        {
          "name": "十堰",
          "key": "S"
        }
        ,
        {
          "name": "朔州",
          "key": "S"
        }
        ,
        {
          "name": "四平",
          "key": "S"
        }
        ,
        {
          "name": "绥化",
          "key": "S"
        }
        ,
        {
          "name": "遂宁",
          "key": "S"
        }
        ,

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

        {
          "name": "娄底",
          "key": "S"
        }
        ,
        {
          "name": "宿迁",
          "key": "S"
        }
        ,
        {
          "name": "宿州",
          "key": "S"
        }

      ],
      "T": [

        {
          "name": "天津",
          "key": "T"
        },
        {
          "name": "太原",
          "key": "T"
        },
        {
          "name": "泰安",
          "key": "T"
        },
        {
          "name": "泰州",
          "key": "T"
        },
        {
          "name": "唐山",
          "key": "T"
        },
        {
          "name": "天水",
          "key": "T"
        },
        {
          "name": "铁岭",
          "key": "T"
        }
        ,
        {
          "name": "铜川",
          "key": "T"
        }
        ,

        {
          "name": "通化",
          "key": "T"
        }
        ,
        {
          "name": "通辽",
          "key": "T"
        }
        ,
        {
          "name": "铜陵",
          "key": "T"
        }
        ,
        {
          "name": "铜仁",
          "key": "T"
        }
        ,
        {
          "name": "台湾",
          "key": "T"
        }


      ]
      ,
      "W": [

        {
          "name": "武汉",
          "key": "W"
        },
        {
          "name": "乌鲁木齐",
          "key": "W"
        },
        {
          "name": "无锡",
          "key": "W"
        },
        {
          "name": "威海",
          "key": "W"
        },
        {
          "name": "潍坊",
          "key": "W"
        },
        {
          "name": "文山",
          "key": "W"
        },
        {
          "name": "温州",
          "key": "W"
        }
        ,
        {
          "name": "乌海",
          "key": "W"
        }
        ,

        {
          "name": "芜湖",
          "key": "W"
        }
        ,
        {
          "name": "乌兰察布",
          "key": "W"
        }
        ,
        {
          "name": "武威",
          "key": "W"
        }
        ,
        {
          "name": "梧州",
          "key": "W"
        }

      ],
      "X": [

        {
          "name": "厦门",
          "key": "X"
        },
        {
          "name": "西安",
          "key": "X"
        },
        {
          "name": "西宁",
          "key": "X"
        },
        {
          "name": "襄樊",
          "key": "X"
        },
        {
          "name": "湘潭",
          "key": "X"
        },
        {
          "name": "湘西",
          "key": "X"
        },
        {
          "name": "咸宁",
          "key": "X"
        }
        ,
        {
          "name": "咸阳",
          "key": "X"
        }
        ,

        {
          "name": "孝感",
          "key": "X"
        }
        ,
        {
          "name": "邢台",
          "key": "X"
        }
        ,
        {
          "name": "新乡",
          "key": "X"
        }
        ,
        {
          "name": "信阳",
          "key": "X"
        }
        ,
        {
          "name": "新余",
          "key": "X"
        }
        ,
        {
          "name": "忻州",
          "key": "X"
        }
        ,
        {
          "name": "西双版纳",
          "key": "X"
        }

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

        {
          "name": "许昌",
          "key": "X"
        }
        ,
        {
          "name": "徐州",
          "key": "X"
        }
        ,
        {
          "name": "香港",
          "key": "X"
        }
        ,
        {
          "name": "锡林郭勒",
          "key": "X"
        }
        ,
        {
          "name": "兴安",
          "key": "X"
        }
      ]
      ,
      "Y": [

        {
          "name": "银川",
          "key": "Y"
        },
        {
          "name": "雅安",
          "key": "Y"
        },
        {
          "name": "延安",
          "key": "Y"
        },
        {
          "name": "延边",
          "key": "Y"
        },
        {
          "name": "盐城",
          "key": "Y"
        },
        {
          "name": "阳江",
          "key": "Y"
        },

        {
          "name": "阳泉",
          "key": "Y"
        }
        ,
        {
          "name": "扬州",
          "key": "Y"
        }
        ,

        {
          "name": "烟台",
          "key": "Y"
        }
        ,
        {
          "name": "宜宾",
          "key": "Y"
        }
        ,
        {
          "name": "宜昌",
          "key": "Y"
        }
        ,
        {
          "name": "宜春",
          "key": "Y"
        }
        ,
        {
          "name": "营口",
          "key": "Y"
        }
        ,

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

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

        {
          "name": "榆林",
          "key": "Y"
        }
        ,
        {
          "name": "运城",
          "key": "Y"
        }
        ,
        {
          "name": "云浮",
          "key": "Y"
        }
        ,
        {
          "name": "玉树",
          "key": "Y"
        }
        ,
        {
          "name": "玉溪",
          "key": "Y"
        }
        ,
        {
          "name": "玉林",
          "key": "Y"
        }

      ],

      "Z": [
        {
          "name": "杂多县",
          "key": "Z"
        },
        {
          "name": "赞皇县",
          "key": "Z"
        },
        {
          "name": "枣强县",
          "key": "Z"
        },
        {
          "name": "枣阳市",
          "key": "Z"
        },
        {
          "name": "枣庄",
          "key": "Z"
        },
        {
          "name": "泽库县",
          "key": "Z"
        },
        {
          "name": "增城市",
          "key": "Z"
        }
        ,

        {
          "name": "曾都区",
          "key": "Z"
        }
        ,
        {
          "name": "泽普县",
          "key": "Z"
        }

        ,
        {
          "name": "泽州县",
          "key": "Z"
        }
        ,
        {
          "name": "札达县",
          "key": "Z"
        }
        ,
        {
          "name": "扎赉特旗",
          "key": "Z"
        }
        ,
        {
          "name": "扎兰屯市",
          "key": "Z"
        }
        ,
        {
          "name": "扎鲁特旗",
          "key": "Z"
        }
        ,

        {
          "name": "扎囊县",
          "key": "Z"
        }
        ,
        {
          "name": "张北县",
          "key": "Z"
        }

        ,
        {
          "name": "张店区",
          "key": "Z"
        }
        ,
        {
          "name": "章贡区",
          "key": "Z"
        }
        ,
        {
          "name": "张家港",
          "key": "Z"
        }
        ,
        {
          "name": "张家界",
          "key": "Z"
        }
        ,
        {
          "name": "张家口",
          "key": "Z"
        }
        ,
        {
          "name": "漳平市",
          "key": "Z"
        }
        ,

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

        {
          "name": "章丘市",
          "key": "Z"
        }
        ,
        {
          "name": "樟树市",
          "key": "Z"
        }
        ,
        {
          "name": "张湾区",
          "key": "Z"
        },
        {
          "name": "彰武县",
          "key": "Z"
        },
        {
          "name": "漳县",
          "key": "Z"
        },
        {
          "name": "张掖",
          "key": "Z"
        },
        {
          "name": "漳州",
          "key": "Z"
        },
        {
          "name": "长子县",
          "key": "Z"
        }
        ,

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

        {
          "name": "站前区",
          "key": "Z"
        }
        ,
        {
          "name": "沾益县",
          "key": "Z"
        }
        ,
        {
          "name": "诏安县",
          "key": "Z"
        },
        {
          "name": "召陵区",
          "key": "Z"
        },
        {
          "name": "昭平县",
          "key": "Z"
        },
        {
          "name": "肇庆",
          "key": "Z"
        },
        {
          "name": "昭通",
          "key": "Z"
        },
        {
          "name": "赵县",
          "key": "Z"
        }

      ]
    }
  ]
}
module.exports = city;

以上就是全部代码,大家可以再自己的项目中部署,谢谢大家,欢迎大牛拍砖。(o)/~
为了更好的服务大家,请加入我们的技术交流群:(511387930),同时您也可以扫描下方的二维码关注我们的公众号,每天我们都会分享经验,谢谢大家。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,039评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,426评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,417评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,868评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,892评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,692评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,416评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,326评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,782评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,957评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,102评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,790评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,442评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,996评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,113评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,332评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,044评论 2 355

推荐阅读更多精彩内容