找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:46

所属分类: 微信开发 微信小程序综合交流

微信小程序用户交流版块,希望同学们积极发言,不过大家不要恶意发布广告哦!

[经验分享] 微信小程序中根据字母选择城市

[复制链接]
查看: 143|回复: 0
最佳答案
0 

15

主题

15

帖子

209

积分

新人求带

积分
209
 楼主| 发表于 2017-8-9 15:26:11 | 显示全部楼层 |阅读模式
今天开发一个小程序,里面涉及到区域选择,看了网上的一些版本,感觉写的不全,有可能是我的理解能力还不够吧。今天我就结合网上的答案,在根据自己的需求,重新整理一份。希望对大家有帮助。先看看截图:
8fae54889678.png

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

一、创建index.wxml文件

在pages->index文件夹下,新建index.wxml文件,代码如下:
  1. <!--index.wxml-->
  2. <view class="title">
  3.   <input class="title_list" value="{{cityName}}" placeholder="城市名称" />
  4.   <button>确认</button>
  5. </view>
  6. <scroll-view   scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
  7.     <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
  8.       <text id="{{idx}}" class="list_tit">{{idx}}</text>
  9.       <block wx:for="{{cityName}}">
  10. <!--
  11. 这里我要讲一下data-用法。
  12. “data-”是事件的使用方式
  13. bindtap是事件处理函数,在这里,我们希望通过点击具体的城市名称,然后在文本框中显示对应的值。具体代码后面再说
  14. 具体的解释大家可以看官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
  15. -->
  16.          <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
  17.       </block>
  18.     </block>
  19. </scroll-view>
  20. <!--城市选择列表-->
  21. <view  class="scroll_list"
  22.       bindtouchstart="chStart"
  23.       bindtouchend="chEnd"
  24.       catchtouchmove="chMove"
  25.       style="background: rgba(0,0,0,{{trans}});"
  26.       >
  27.    <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
  28.       <block wx:if="{{idx != '热门城市'}}">
  29.        <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>
  30.       </block>
  31.     </block>
  32. </view>

  33. <!--选择显示-->
  34. <view hidden="{{hidden}}" class="showwords">
  35.   {{showwords}}
  36. </view>
复制代码

二、创建对应的CSS

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

  2. .title {
  3.     position: relative;
  4.     padding: 10px 0;
  5. }
  6. .title_list {
  7.     display: inline-block;
  8.     padding: 0 15px;
  9.     height: 20px;
  10.     line-height: 20px;
  11.     font-size: 16px;
  12. }
  13. .title button {
  14.     width: 50px;
  15.     height: 30px;
  16.     font-size: 16px;
  17.     padding: 0;
  18.     line-height: 30px;
  19.     margin: auto;
  20.     position: absolute;
  21.     top: 0;
  22.     bottom:0;
  23.     right: 10px;
  24.     background: none;
  25. }
  26. .title button::after {
  27.     border: none;
  28. }
  29. .title_list:nth-child(1) {
  30.     border-right:1px #ccc solid;
  31. }
  32. /*城市列表*/
  33. .city_list {
  34.     position: relative;
  35. }

  36. /*城市选择头部*/
  37. .list_tit {
  38.     display: block;
  39.     line-height: 40px;
  40.     height: 40px;
  41.     padding-left: 15px;
  42.     font-size: 16ppx;
  43.     background: #f5f5f5;
  44.     color: #666;
  45. }
  46. .list_con {
  47.     height: 40px;
  48.     /*border-top: 1px #f5f5f5 solid ;*/
  49.     line-height: 40px;
  50.     font-size: 16px;
  51.     padding-left: 15px;
  52. }
  53. .list_con::before {
  54.     content: " ";
  55.     height: 1px;
  56.     border-top: 1px #f5f5f5 solid;
  57.     position: absolute;
  58.     width: 100%;
  59. }
  60. .list_con::before:nth-child(1) {
  61.     border: none;
  62. }
  63. /*城市选择 右边*/
  64. .scroll_list {
  65.     background: rgba(0,0,0,0);
  66.     position: absolute;
  67.     height: calc(100% - 100px);
  68.     width: 25px;
  69.     top: 90px;
  70.     right: 10px;
  71. }
  72. .scroll_list_chi {
  73.     /*border: 1px blue solid;*/
  74.     text-align: center;
  75.     font-size: 12px;
  76. }
  77. /*显示框*/

  78. .showwords {
  79.     width: 80px;
  80.     height: 80px;
  81.     background: rgba(0,0,0,.3);
  82.     border-radius:50%;
  83.     line-height: 80px;
  84.     text-align: center;
  85.     font-size:10vw;
  86.     margin: auto;
  87.     position: absolute;
  88.     top: 0;left: 0;bottom: 0;right: 0;
  89.     z-index: 999;   
  90. }
复制代码

三、创建JS文件

在pages->index文件夹下,新建index.js文件,代码如下:
  1. //先引用城市数据文件
  2. var city = require('../../utils/city.js')
  3. var lineHeight = 0;
  4. var endWords = "";
  5. var isNum;
  6. Page({
  7.   data: {
  8.     "hidden": true,
  9.     cityName:"", //获取选中的城市名

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


  13.   },
  14.   onReady: function () {
  15.     // 生命周期函数--监听页面初次渲染完成
  16.     var cityChild = city.City[0];
  17.     var that = this;
  18.     wx.getSystemInfo({
  19.       success: function (res) {
  20.         lineHeight = (res.windowHeight - 100) / 22;
  21.         console.log(res.windowHeight - 100)
  22.         that.setData({
  23.           city: cityChild,
  24.           winHeight: res.windowHeight - 40,
  25.           lineHeight: lineHeight
  26.         })
  27.       }
  28.     })
  29.   },
  30.   onShow: function () {
  31.     // 生命周期函数--监听页面显示

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

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

  38.   },
  39.   //触发全部开始选择
  40.   chStart: function () {
  41.     this.setData({
  42.       trans: ".3",
  43.       hidden: false
  44.     })
  45.   },
  46.   //触发结束选择
  47.   chEnd: function () {
  48.     this.setData({
  49.       trans: "0",
  50.       hidden: true,
  51.       scrollTopId: this.endWords
  52.     })
  53.   },
  54.   //获取文字信息
  55.   getWords: function (e) {
  56.     var id = e.target.id;
  57.     this.endWords = id;
  58.     isNum = id;
  59.     this.setData({
  60.       showwords: this.endWords
  61.     })
  62.   },
  63.   //设置文字信息
  64.   setWords: function (e) {
  65.     var id = e.target.id;
  66.     this.setData({
  67.       scrollTopId: id
  68.     })
  69.   },

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

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


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

  107.   }

  108. })
复制代码

四、创建城市文件

在utils文件夹里创建city.js文件,具体代码如下:
  1. var city = {
  2.   "City": [
  3.     {
  4.       "热门城市": [

  5.         {
  6.           "name": "北京",
  7.           "key": "热门"
  8.         },
  9.         {
  10.           "name": "上海",
  11.           "key": "热门"
  12.         },
  13.         {
  14.           "name": "广州",
  15.           "key": "热门"
  16.         },
  17.         {
  18.           "name": "深圳",
  19.           "key": "热门"
  20.         },
  21.         {
  22.           "name": "成都",
  23.           "key": "热门"
  24.         },

  25.         {
  26.           "name": "重庆",
  27.           "key": "热门"
  28.         },
  29.         {
  30.           "name": "天津",
  31.           "key": "热门"
  32.         },
  33.         {
  34.           "name": "杭州",
  35.           "key": "热门"
  36.         },
  37.         {
  38.           "name": "南京",
  39.           "key": "热门"
  40.         },
  41.         {
  42.           "name": "苏州",
  43.           "key": "热门"
  44.         },
  45.         {
  46.           "name": "武汉",
  47.           "key": "热门"
  48.         },

  49.         {
  50.           "name": "西安",
  51.           "key": "热门"
  52.         }

  53.       ],
  54.       "A": [
  55.         {
  56.           "name": "阿坝",
  57.           "key": "A"
  58.         },
  59.         {
  60.           "name": "阿拉善",
  61.           "key": "A"
  62.         },
  63.         {
  64.           "name": "阿里",
  65.           "key": "A"
  66.         },
  67.         {
  68.           "name": "安康",
  69.           "key": "A"
  70.         },
  71.         {
  72.           "name": "安庆",
  73.           "key": "A"
  74.         },

  75.         {
  76.           "name": "鞍山",
  77.           "key": "A"
  78.         }
  79.         ,
  80.         {
  81.           "name": "安顺",
  82.           "key": "A"
  83.         }
  84.         ,
  85.         {
  86.           "name": "安阳",
  87.           "key": "A"
  88.         }
  89.         ,
  90.         {
  91.           "name": "澳门",
  92.           "key": "A"
  93.         }
  94.       ],
  95.       "B": [
  96.         {
  97.           "name": "北京",
  98.           "key": "B"
  99.         },
  100.         {
  101.           "name": "白银",
  102.           "key": "B"
  103.         },
  104.         {
  105.           "name": "保定",
  106.           "key": "B"
  107.         },
  108.         {
  109.           "name": "宝鸡",
  110.           "key": "B"
  111.         },
  112.         {
  113.           "name": "保山",
  114.           "key": "B"
  115.         },
  116.         {
  117.           "name": "包头",
  118.           "key": "B"
  119.         },
  120.         {
  121.           "name": "巴中",
  122.           "key": "B"
  123.         }
  124.         ,
  125.         {
  126.           "name": "北海",
  127.           "key": "B"
  128.         }
  129.         ,
  130.         {
  131.           "name": "蚌埠",
  132.           "key": "B"
  133.         }
  134.         ,
  135.         {
  136.           "name": "本溪",
  137.           "key": "B"
  138.         }
  139.         ,
  140.         {
  141.           "name": "毕节",
  142.           "key": "B"
  143.         }
  144.         ,
  145.         {
  146.           "name": "滨州",
  147.           "key": "B"
  148.         }
  149.         ,
  150.         {
  151.           "name": "百色",
  152.           "key": "B"
  153.         }
  154.         ,
  155.         {
  156.           "name": "亳州",
  157.           "key": "B"
  158.         }
  159.       ],
  160.       "C": [
  161.         {
  162.           "name": "重庆",
  163.           "key": "C"
  164.         },
  165.         {
  166.           "name": "成都",
  167.           "key": "C"
  168.         },
  169.         {
  170.           "name": "长沙",
  171.           "key": "C"
  172.         },
  173.         {
  174.           "name": "长春",
  175.           "key": "C"
  176.         },
  177.         {
  178.           "name": "沧州",
  179.           "key": "C"
  180.         },
  181.         {
  182.           "name": "常德",
  183.           "key": "C"
  184.         },
  185.         {
  186.           "name": "昌都",
  187.           "key": "C"
  188.         }
  189.         ,
  190.         {
  191.           "name": "长治",
  192.           "key": "C"
  193.         }
  194.         ,
  195.         {
  196.           "name": "常州",
  197.           "key": "C"
  198.         }
  199.         ,
  200.         {
  201.           "name": "巢湖",
  202.           "key": "C"
  203.         }
  204.         ,
  205.         {
  206.           "name": "潮州",
  207.           "key": "C"
  208.         }
  209.         ,
  210.         {
  211.           "name": "承德",
  212.           "key": "C"
  213.         }
  214.         ,
  215.         {
  216.           "name": "郴州",
  217.           "key": "C"
  218.         }
  219.         ,
  220.         {
  221.           "name": "赤峰",
  222.           "key": "C"
  223.         }
  224.         ,
  225.         {
  226.           "name": "池州",
  227.           "key": "C"
  228.         }
  229.         ,
  230.         {
  231.           "name": "崇左",
  232.           "key": "C"
  233.         }
  234.         ,
  235.         {
  236.           "name": "楚雄",
  237.           "key": "C"
  238.         }
  239.         ,
  240.         {
  241.           "name": "滁州",
  242.           "key": "C"
  243.         }
  244.         ,
  245.         {
  246.           "name": "朝阳",
  247.           "key": "C"
  248.         }
  249.       ],
  250.       "D": [
  251.         {
  252.           "name": "大连",
  253.           "key": "D"
  254.         },
  255.         {
  256.           "name": "东莞",
  257.           "key": "D"
  258.         },
  259.         {
  260.           "name": "大理",
  261.           "key": "D"
  262.         },
  263.         {
  264.           "name": "丹东",
  265.           "key": "D"
  266.         },
  267.         {
  268.           "name": "大庆",
  269.           "key": "D"
  270.         },
  271.         {
  272.           "name": "大同",
  273.           "key": "D"
  274.         },
  275.         {
  276.           "name": "大兴安岭",
  277.           "key": "D"
  278.         }
  279.         ,
  280.         {
  281.           "name": "德宏",
  282.           "key": "D"
  283.         }
  284.         ,
  285.         {
  286.           "name": "德阳",
  287.           "key": "D"
  288.         }
  289.         ,
  290.         {
  291.           "name": "德州",
  292.           "key": "D"
  293.         }
  294.         ,
  295.         {
  296.           "name": "定西",
  297.           "key": "D"
  298.         }
  299.         ,
  300.         {
  301.           "name": "迪庆",
  302.           "key": "D"
  303.         }
  304.         ,
  305.         {
  306.           "name": "东营",
  307.           "key": "D"
  308.         }

  309.       ],
  310.       "E": [
  311.         {
  312.           "name": "鄂尔多斯",
  313.           "key": "E"
  314.         }
  315.         ,
  316.         {
  317.           "name": "恩施",
  318.           "key": "E"
  319.         }
  320.         ,
  321.         {
  322.           "name": "鄂州",
  323.           "key": "E"
  324.         }
  325.       ],
  326.       "F": [
  327.         {
  328.           "name": "福州",
  329.           "key": "F"
  330.         }
  331.         ,
  332.         {
  333.           "name": "防城港",
  334.           "key": "F"
  335.         }
  336.         ,
  337.         {
  338.           "name": "佛山",
  339.           "key": "F"
  340.         }
  341.         ,
  342.         {
  343.           "name": "抚顺",
  344.           "key": "F"
  345.         }
  346.         ,
  347.         {
  348.           "name": "抚州",
  349.           "key": "F"
  350.         }
  351.         ,
  352.         {
  353.           "name": "阜新",
  354.           "key": "F"
  355.         }
  356.         ,
  357.         {
  358.           "name": "阜阳",
  359.           "key": "F"
  360.         }
  361.       ]
  362.       ,
  363.       "G": [
  364.         {
  365.           "name": "广州",
  366.           "key": "G"
  367.         },
  368.         {
  369.           "name": "赣州",
  370.           "key": "G"
  371.         },
  372.         {
  373.           "name": "桂林",
  374.           "key": "G"
  375.         },
  376.         {
  377.           "name": "贵阳",
  378.           "key": "G"
  379.         },
  380.         {
  381.           "name": "甘南",
  382.           "key": "G"
  383.         },

  384.         {
  385.           "name": "甘孜",
  386.           "key": "G"
  387.         },
  388.         {
  389.           "name": "广安",
  390.           "key": "G"
  391.         }
  392.         ,
  393.         {
  394.           "name": "广元",
  395.           "key": "G"
  396.         }
  397.         ,
  398.         {
  399.           "name": "果洛",
  400.           "key": "G"
  401.         }
  402.         ,
  403.         {
  404.           "name": "贵港",
  405.           "key": "G"
  406.         }

  407.       ],

  408.       "H": [
  409.         {
  410.           "name": "杭州",
  411.           "key": "H"
  412.         },
  413.         {
  414.           "name": "哈尔滨",
  415.           "key": "H"
  416.         },
  417.         {
  418.           "name": "合肥",
  419.           "key": "H"
  420.         },
  421.         {
  422.           "name": "海口",
  423.           "key": "H"
  424.         },
  425.         {
  426.           "name": "海东",
  427.           "key": "H"
  428.         },
  429.         {
  430.           "name": "海北",
  431.           "key": "H"
  432.         },
  433.         {
  434.           "name": "海南",
  435.           "key": "H"
  436.         }
  437.         ,
  438.         {
  439.           "name": "海西",
  440.           "key": "H"
  441.         }
  442.         ,
  443.         {
  444.           "name": "邯郸",
  445.           "key": "H"
  446.         }

  447.         ,
  448.         {
  449.           "name": "汉中",
  450.           "key": "H"
  451.         }
  452.         ,
  453.         {
  454.           "name": "鹤壁",
  455.           "key": "H"
  456.         }
  457.         ,
  458.         {
  459.           "name": "河池",
  460.           "key": "H"
  461.         }
  462.         ,
  463.         {
  464.           "name": "鹤岗",
  465.           "key": "H"
  466.         }
  467.         ,
  468.         {
  469.           "name": "黑河",
  470.           "key": "H"
  471.         }
  472.         ,
  473.         {
  474.           "name": "衡水",
  475.           "key": "H"
  476.         }
  477.         ,
  478.         {
  479.           "name": "衡阳",
  480.           "key": "H"
  481.         }

  482.         ,
  483.         {
  484.           "name": "河源",
  485.           "key": "H"
  486.         }
  487.         ,
  488.         {
  489.           "name": "贺州",
  490.           "key": "H"
  491.         }
  492.         ,
  493.         {
  494.           "name": "红河",
  495.           "key": "H"
  496.         }
  497.         ,
  498.         {
  499.           "name": "淮安",
  500.           "key": "H"
  501.         }
  502.         ,
  503.         {
  504.           "name": "淮北",
  505.           "key": "H"
  506.         }
  507.         ,
  508.         {
  509.           "name": "怀化",
  510.           "key": "H"
  511.         }
  512.         ,
  513.         {
  514.           "name": "淮南",
  515.           "key": "H"
  516.         }
  517.         ,

  518.         {
  519.           "name": "黄冈",
  520.           "key": "H"
  521.         }
  522.         ,
  523.         {
  524.           "name": "黄南",
  525.           "key": "H"
  526.         }
  527.         ,
  528.         {
  529.           "name": "黄山",
  530.           "key": "H"
  531.         },
  532.         {
  533.           "name": "黄石",
  534.           "key": "H"
  535.         },
  536.         {
  537.           "name": "惠州",
  538.           "key": "H"
  539.         },
  540.         {
  541.           "name": "葫芦岛",
  542.           "key": "H"
  543.         },
  544.         {
  545.           "name": "呼伦贝尔",
  546.           "key": "H"
  547.         },
  548.         {
  549.           "name": "湖州",
  550.           "key": "H"
  551.         }
  552.         ,
  553.         {
  554.           "name": "菏泽",
  555.           "key": "H"
  556.         }

  557.       ],
  558.       "J": [

  559.         {
  560.           "name": "济南",
  561.           "key": "J"
  562.         },
  563.         {
  564.           "name": "佳木斯",
  565.           "key": "J"
  566.         },
  567.         {
  568.           "name": "吉安",
  569.           "key": "J"
  570.         },
  571.         {
  572.           "name": "江门",
  573.           "key": "J"
  574.         },
  575.         {
  576.           "name": "焦作",
  577.           "key": "J"
  578.         },
  579.         {
  580.           "name": "嘉兴",
  581.           "key": "J"
  582.         },
  583.         {
  584.           "name": "嘉峪关",
  585.           "key": "J"
  586.         }
  587.         ,
  588.         {
  589.           "name": "揭阳",
  590.           "key": "J"
  591.         }
  592.         ,

  593.         {
  594.           "name": "吉林",
  595.           "key": "J"
  596.         }
  597.         ,
  598.         {
  599.           "name": "金昌",
  600.           "key": "J"
  601.         }
  602.         ,
  603.         {
  604.           "name": "晋城",
  605.           "key": "J"
  606.         }
  607.         ,
  608.         {
  609.           "name": "景德镇",
  610.           "key": "J"
  611.         }
  612.         ,
  613.         {
  614.           "name": "荆门",
  615.           "key": "J"
  616.         }
  617.         ,
  618.         {
  619.           "name": "荆州",
  620.           "key": "J"
  621.         }
  622.         ,
  623.         {
  624.           "name": "金华",
  625.           "key": "J"
  626.         }

  627.         ,
  628.         {
  629.           "name": "济宁",
  630.           "key": "J"
  631.         }
  632.         ,
  633.         {
  634.           "name": "晋中",
  635.           "key": "J"
  636.         }
  637.         ,
  638.         {
  639.           "name": "锦州",
  640.           "key": "J"
  641.         }
  642.         ,
  643.         {
  644.           "name": "九江",
  645.           "key": "J"
  646.         }
  647.         ,
  648.         {
  649.           "name": "酒泉",
  650.           "key": "J"
  651.         }
  652.       ]
  653.       ,
  654.       "K": [
  655.         {
  656.           "name": "昆明",
  657.           "key": "K"

  658.         }
  659.         ,
  660.         {

  661.           "name": "开封",
  662.           "key": "K"
  663.         }
  664.       ]
  665.       ,

  666.       "L": [
  667.         {
  668.           "name": "兰州",
  669.           "key": "L"
  670.         },
  671.         {
  672.           "name": "拉萨",
  673.           "key": "L"
  674.         },
  675.         {
  676.           "name": "来宾",
  677.           "key": "L"
  678.         },
  679.         {
  680.           "name": "莱芜",
  681.           "key": "L"
  682.         },
  683.         {
  684.           "name": "廊坊",
  685.           "key": "L"
  686.         },
  687.         {
  688.           "name": "乐山",
  689.           "key": "L"
  690.         },
  691.         {
  692.           "name": "凉山",
  693.           "key": "L"
  694.         }
  695.         ,
  696.         {
  697.           "name": "连云港",
  698.           "key": "L"
  699.         }

  700.         ,
  701.         {
  702.           "name": "聊城",
  703.           "key": "L"
  704.         }

  705.         ,
  706.         {
  707.           "name": "辽阳",
  708.           "key": "L"
  709.         }
  710.         ,
  711.         {
  712.           "name": "辽源",
  713.           "key": "L"
  714.         }
  715.         ,
  716.         {
  717.           "name": "丽江",
  718.           "key": "L"
  719.         }
  720.         ,
  721.         {
  722.           "name": "临沧",
  723.           "key": "L"
  724.         }
  725.         ,
  726.         {
  727.           "name": "临汾",
  728.           "key": "L"
  729.         }
  730.         ,
  731.         {
  732.           "name": "临夏",
  733.           "key": "L"
  734.         }
  735.         ,

  736.         {
  737.           "name": "临沂",
  738.           "key": "L"
  739.         }

  740.         ,
  741.         {
  742.           "name": "林芝",
  743.           "key": "L"
  744.         }
  745.         ,
  746.         {
  747.           "name": "丽水",
  748.           "key": "L"
  749.         }
  750.         ,
  751.         {
  752.           "name": "六安",
  753.           "key": "L"
  754.         }
  755.         ,
  756.         {
  757.           "name": "六盘水",
  758.           "key": "L"
  759.         }
  760.         ,
  761.         {
  762.           "name": "柳州",
  763.           "key": "L"
  764.         }
  765.         ,
  766.         {
  767.           "name": "陇南",
  768.           "key": "L"
  769.         }
  770.         ,

  771.         {
  772.           "name": "龙岩",
  773.           "key": "L"
  774.         }
  775.         ,

  776.         {
  777.           "name": "娄底",
  778.           "key": "L"
  779.         }
  780.         ,
  781.         {
  782.           "name": "漯河",
  783.           "key": "L"
  784.         }
  785.         ,
  786.         {
  787.           "name": "洛阳",
  788.           "key": "L"
  789.         },
  790.         {
  791.           "name": "泸州",
  792.           "key": "L"
  793.         },
  794.         {
  795.           "name": "吕梁",
  796.           "key": "L"
  797.         }

  798.       ],

  799.       "M": [
  800.         {
  801.           "name": "马鞍山",
  802.           "key": "M"
  803.         }
  804.         ,
  805.         {
  806.           "name": "茂名",
  807.           "key": "M"
  808.         }
  809.         ,
  810.         {
  811.           "name": "眉山",
  812.           "key": "M"
  813.         }
  814.         ,
  815.         {
  816.           "name": "梅州",
  817.           "key": "M"
  818.         }
  819.         ,
  820.         {
  821.           "name": "绵阳",
  822.           "key": "M"
  823.         }
  824.         ,
  825.         {
  826.           "name": "牡丹江",
  827.           "key": "M"
  828.         }

  829.       ],
  830.       "N": [

  831.         {
  832.           "name": "南京",
  833.           "key": "N"
  834.         },
  835.         {
  836.           "name": "南昌",
  837.           "key": "N"
  838.         },
  839.         {
  840.           "name": "南宁",
  841.           "key": "N"
  842.         },
  843.         {
  844.           "name": "南充",
  845.           "key": "N"
  846.         },
  847.         {
  848.           "name": "南平",
  849.           "key": "N"
  850.         },
  851.         {
  852.           "name": "南通",
  853.           "key": "N"
  854.         },
  855.         {
  856.           "name": "南阳",
  857.           "key": "N"
  858.         }
  859.         ,
  860.         {
  861.           "name": "那曲",
  862.           "key": "N"
  863.         }

  864.         ,
  865.         {
  866.           "name": "内江",
  867.           "key": "N"
  868.         }
  869.         ,
  870.         {
  871.           "name": "宁德",
  872.           "key": "N"
  873.         }
  874.         ,
  875.         {
  876.           "name": "怒江",
  877.           "key": "N"
  878.         }


  879.       ],
  880.       "P": [

  881.         {
  882.           "name": "盘锦",
  883.           "key": "P"
  884.         }
  885.         ,
  886.         {
  887.           "name": "攀枝花",
  888.           "key": "P"
  889.         }
  890.         ,
  891.         {
  892.           "name": "平顶山",
  893.           "key": "P"
  894.         }
  895.         ,
  896.         {
  897.           "name": "平凉",
  898.           "key": "P"
  899.         }
  900.         ,
  901.         {
  902.           "name": "萍乡",
  903.           "key": "P"
  904.         }
  905.         ,
  906.         {
  907.           "name": "莆田",
  908.           "key": "P"
  909.         }
  910.         ,
  911.         {
  912.           "name": "濮阳",
  913.           "key": "P"
  914.         }

  915.       ],
  916.       "Q": [

  917.         {
  918.           "name": "青岛",
  919.           "key": "Q"
  920.         },
  921.         {
  922.           "name": "黔东南",
  923.           "key": "Q"
  924.         },
  925.         {
  926.           "name": "黔南",
  927.           "key": "Q"
  928.         },
  929.         {
  930.           "name": "黔西南",
  931.           "key": "Q"
  932.         },
  933.         {
  934.           "name": "庆阳",
  935.           "key": "Q"
  936.         },
  937.         {
  938.           "name": "清远",
  939.           "key": "Q"
  940.         },
  941.         {
  942.           "name": "秦皇岛",
  943.           "key": "Q"
  944.         }
  945.         ,
  946.         {
  947.           "name": "钦州",
  948.           "key": "Q"
  949.         }
  950.         ,
  951.         {
  952.           "name": "齐齐哈尔",
  953.           "key": "Q"
  954.         }
  955.         ,
  956.         {
  957.           "name": "泉州",
  958.           "key": "Q"
  959.         }
  960.         ,
  961.         {
  962.           "name": "曲靖",
  963.           "key": "Q"
  964.         }
  965.         ,
  966.         {
  967.           "name": "衢州",
  968.           "key": "Q"
  969.         }


  970.       ],

  971.       "R": [
  972.         {
  973.           "name": "日喀则",
  974.           "key": "R"
  975.         },
  976.         {
  977.           "name": "日照",
  978.           "key": "R"
  979.         }
  980.       ]
  981.       ,

  982.       "S": [
  983.         {
  984.           "name": "上海",
  985.           "key": "S"
  986.         },
  987.         {
  988.           "name": "深圳",
  989.           "key": "S"
  990.         },
  991.         {
  992.           "name": "苏州",
  993.           "key": "S"
  994.         },
  995.         {
  996.           "name": "沈阳",
  997.           "key": "S"
  998.         },
  999.         {
  1000.           "name": "石家庄",
  1001.           "key": "S"
  1002.         },
  1003.         {
  1004.           "name": "三门峡",
  1005.           "key": "S"
  1006.         },
  1007.         {
  1008.           "name": "三明",
  1009.           "key": "S"
  1010.         }
  1011.         ,
  1012.         {
  1013.           "name": "三亚",
  1014.           "key": "S"
  1015.         }

  1016.         ,
  1017.         {
  1018.           "name": "商洛",
  1019.           "key": "S"
  1020.         }

  1021.         ,
  1022.         {
  1023.           "name": "商丘",
  1024.           "key": "S"
  1025.         }
  1026.         ,
  1027.         {
  1028.           "name": "上饶",
  1029.           "key": "S"
  1030.         }
  1031.         ,
  1032.         {
  1033.           "name": "山南",
  1034.           "key": "S"
  1035.         }
  1036.         ,
  1037.         {
  1038.           "name": "汕头",
  1039.           "key": "S"
  1040.         }
  1041.         ,
  1042.         {
  1043.           "name": "汕尾",
  1044.           "key": "S"
  1045.         }
  1046.         ,
  1047.         {
  1048.           "name": "韶关",
  1049.           "key": "S"
  1050.         }
  1051.         ,

  1052.         {
  1053.           "name": "绍兴",
  1054.           "key": "S"
  1055.         }

  1056.         ,
  1057.         {
  1058.           "name": "邵阳",
  1059.           "key": "S"
  1060.         }
  1061.         ,
  1062.         {
  1063.           "name": "十堰",
  1064.           "key": "S"
  1065.         }
  1066.         ,
  1067.         {
  1068.           "name": "朔州",
  1069.           "key": "S"
  1070.         }
  1071.         ,
  1072.         {
  1073.           "name": "四平",
  1074.           "key": "S"
  1075.         }
  1076.         ,
  1077.         {
  1078.           "name": "绥化",
  1079.           "key": "S"
  1080.         }
  1081.         ,
  1082.         {
  1083.           "name": "遂宁",
  1084.           "key": "S"
  1085.         }
  1086.         ,

  1087.         {
  1088.           "name": "随州",
  1089.           "key": "S"
  1090.         }
  1091.         ,

  1092.         {
  1093.           "name": "娄底",
  1094.           "key": "S"
  1095.         }
  1096.         ,
  1097.         {
  1098.           "name": "宿迁",
  1099.           "key": "S"
  1100.         }
  1101.         ,
  1102.         {
  1103.           "name": "宿州",
  1104.           "key": "S"
  1105.         }

  1106.       ],
  1107.       "T": [

  1108.         {
  1109.           "name": "天津",
  1110.           "key": "T"
  1111.         },
  1112.         {
  1113.           "name": "太原",
  1114.           "key": "T"
  1115.         },
  1116.         {
  1117.           "name": "泰安",
  1118.           "key": "T"
  1119.         },
  1120.         {
  1121.           "name": "泰州",
  1122.           "key": "T"
  1123.         },
  1124.         {
  1125.           "name": "唐山",
  1126.           "key": "T"
  1127.         },
  1128.         {
  1129.           "name": "天水",
  1130.           "key": "T"
  1131.         },
  1132.         {
  1133.           "name": "铁岭",
  1134.           "key": "T"
  1135.         }
  1136.         ,
  1137.         {
  1138.           "name": "铜川",
  1139.           "key": "T"
  1140.         }
  1141.         ,

  1142.         {
  1143.           "name": "通化",
  1144.           "key": "T"
  1145.         }
  1146.         ,
  1147.         {
  1148.           "name": "通辽",
  1149.           "key": "T"
  1150.         }
  1151.         ,
  1152.         {
  1153.           "name": "铜陵",
  1154.           "key": "T"
  1155.         }
  1156.         ,
  1157.         {
  1158.           "name": "铜仁",
  1159.           "key": "T"
  1160.         }
  1161.         ,
  1162.         {
  1163.           "name": "台湾",
  1164.           "key": "T"
  1165.         }


  1166.       ]
  1167.       ,
  1168.       "W": [

  1169.         {
  1170.           "name": "武汉",
  1171.           "key": "W"
  1172.         },
  1173.         {
  1174.           "name": "乌鲁木齐",
  1175.           "key": "W"
  1176.         },
  1177.         {
  1178.           "name": "无锡",
  1179.           "key": "W"
  1180.         },
  1181.         {
  1182.           "name": "威海",
  1183.           "key": "W"
  1184.         },
  1185.         {
  1186.           "name": "潍坊",
  1187.           "key": "W"
  1188.         },
  1189.         {
  1190.           "name": "文山",
  1191.           "key": "W"
  1192.         },
  1193.         {
  1194.           "name": "温州",
  1195.           "key": "W"
  1196.         }
  1197.         ,
  1198.         {
  1199.           "name": "乌海",
  1200.           "key": "W"
  1201.         }
  1202.         ,

  1203.         {
  1204.           "name": "芜湖",
  1205.           "key": "W"
  1206.         }
  1207.         ,
  1208.         {
  1209.           "name": "乌兰察布",
  1210.           "key": "W"
  1211.         }
  1212.         ,
  1213.         {
  1214.           "name": "武威",
  1215.           "key": "W"
  1216.         }
  1217.         ,
  1218.         {
  1219.           "name": "梧州",
  1220.           "key": "W"
  1221.         }

  1222.       ],
  1223.       "X": [

  1224.         {
  1225.           "name": "厦门",
  1226.           "key": "X"
  1227.         },
  1228.         {
  1229.           "name": "西安",
  1230.           "key": "X"
  1231.         },
  1232.         {
  1233.           "name": "西宁",
  1234.           "key": "X"
  1235.         },
  1236.         {
  1237.           "name": "襄樊",
  1238.           "key": "X"
  1239.         },
  1240.         {
  1241.           "name": "湘潭",
  1242.           "key": "X"
  1243.         },
  1244.         {
  1245.           "name": "湘西",
  1246.           "key": "X"
  1247.         },
  1248.         {
  1249.           "name": "咸宁",
  1250.           "key": "X"
  1251.         }
  1252.         ,
  1253.         {
  1254.           "name": "咸阳",
  1255.           "key": "X"
  1256.         }
  1257.         ,

  1258.         {
  1259.           "name": "孝感",
  1260.           "key": "X"
  1261.         }
  1262.         ,
  1263.         {
  1264.           "name": "邢台",
  1265.           "key": "X"
  1266.         }
  1267.         ,
  1268.         {
  1269.           "name": "新乡",
  1270.           "key": "X"
  1271.         }
  1272.         ,
  1273.         {
  1274.           "name": "信阳",
  1275.           "key": "X"
  1276.         }
  1277.         ,
  1278.         {
  1279.           "name": "新余",
  1280.           "key": "X"
  1281.         }
  1282.         ,
  1283.         {
  1284.           "name": "忻州",
  1285.           "key": "X"
  1286.         }
  1287.         ,
  1288.         {
  1289.           "name": "西双版纳",
  1290.           "key": "X"
  1291.         }

  1292.         ,
  1293.         {
  1294.           "name": "宣城",
  1295.           "key": "X"
  1296.         }
  1297.         ,

  1298.         {
  1299.           "name": "许昌",
  1300.           "key": "X"
  1301.         }
  1302.         ,
  1303.         {
  1304.           "name": "徐州",
  1305.           "key": "X"
  1306.         }
  1307.         ,
  1308.         {
  1309.           "name": "香港",
  1310.           "key": "X"
  1311.         }
  1312.         ,
  1313.         {
  1314.           "name": "锡林郭勒",
  1315.           "key": "X"
  1316.         }
  1317.         ,
  1318.         {
  1319.           "name": "兴安",
  1320.           "key": "X"
  1321.         }
  1322.       ]
  1323.       ,
  1324.       "Y": [

  1325.         {
  1326.           "name": "银川",
  1327.           "key": "Y"
  1328.         },
  1329.         {
  1330.           "name": "雅安",
  1331.           "key": "Y"
  1332.         },
  1333.         {
  1334.           "name": "延安",
  1335.           "key": "Y"
  1336.         },
  1337.         {
  1338.           "name": "延边",
  1339.           "key": "Y"
  1340.         },
  1341.         {
  1342.           "name": "盐城",
  1343.           "key": "Y"
  1344.         },
  1345.         {
  1346.           "name": "阳江",
  1347.           "key": "Y"
  1348.         },

  1349.         {
  1350.           "name": "阳泉",
  1351.           "key": "Y"
  1352.         }
  1353.         ,
  1354.         {
  1355.           "name": "扬州",
  1356.           "key": "Y"
  1357.         }
  1358.         ,

  1359.         {
  1360.           "name": "烟台",
  1361.           "key": "Y"
  1362.         }
  1363.         ,
  1364.         {
  1365.           "name": "宜宾",
  1366.           "key": "Y"
  1367.         }
  1368.         ,
  1369.         {
  1370.           "name": "宜昌",
  1371.           "key": "Y"
  1372.         }
  1373.         ,
  1374.         {
  1375.           "name": "宜春",
  1376.           "key": "Y"
  1377.         }
  1378.         ,
  1379.         {
  1380.           "name": "营口",
  1381.           "key": "Y"
  1382.         }
  1383.         ,

  1384.         {
  1385.           "name": "益阳",
  1386.           "key": "Y"
  1387.         }
  1388.         ,
  1389.         {
  1390.           "name": "永州",
  1391.           "key": "Y"
  1392.         }

  1393.         ,
  1394.         {
  1395.           "name": "岳阳",
  1396.           "key": "Y"
  1397.         }
  1398.         ,

  1399.         {
  1400.           "name": "榆林",
  1401.           "key": "Y"
  1402.         }
  1403.         ,
  1404.         {
  1405.           "name": "运城",
  1406.           "key": "Y"
  1407.         }
  1408.         ,
  1409.         {
  1410.           "name": "云浮",
  1411.           "key": "Y"
  1412.         }
  1413.         ,
  1414.         {
  1415.           "name": "玉树",
  1416.           "key": "Y"
  1417.         }
  1418.         ,
  1419.         {
  1420.           "name": "玉溪",
  1421.           "key": "Y"
  1422.         }
  1423.         ,
  1424.         {
  1425.           "name": "玉林",
  1426.           "key": "Y"
  1427.         }

  1428.       ],

  1429.       "Z": [
  1430.         {
  1431.           "name": "杂多县",
  1432.           "key": "Z"
  1433.         },
  1434.         {
  1435.           "name": "赞皇县",
  1436.           "key": "Z"
  1437.         },
  1438.         {
  1439.           "name": "枣强县",
  1440.           "key": "Z"
  1441.         },
  1442.         {
  1443.           "name": "枣阳市",
  1444.           "key": "Z"
  1445.         },
  1446.         {
  1447.           "name": "枣庄",
  1448.           "key": "Z"
  1449.         },
  1450.         {
  1451.           "name": "泽库县",
  1452.           "key": "Z"
  1453.         },
  1454.         {
  1455.           "name": "增城市",
  1456.           "key": "Z"
  1457.         }
  1458.         ,

  1459.         {
  1460.           "name": "曾都区",
  1461.           "key": "Z"
  1462.         }
  1463.         ,
  1464.         {
  1465.           "name": "泽普县",
  1466.           "key": "Z"
  1467.         }

  1468.         ,
  1469.         {
  1470.           "name": "泽州县",
  1471.           "key": "Z"
  1472.         }
  1473.         ,
  1474.         {
  1475.           "name": "札达县",
  1476.           "key": "Z"
  1477.         }
  1478.         ,
  1479.         {
  1480.           "name": "扎赉特旗",
  1481.           "key": "Z"
  1482.         }
  1483.         ,
  1484.         {
  1485.           "name": "扎兰屯市",
  1486.           "key": "Z"
  1487.         }
  1488.         ,
  1489.         {
  1490.           "name": "扎鲁特旗",
  1491.           "key": "Z"
  1492.         }
  1493.         ,

  1494.         {
  1495.           "name": "扎囊县",
  1496.           "key": "Z"
  1497.         }
  1498.         ,
  1499.         {
  1500.           "name": "张北县",
  1501.           "key": "Z"
  1502.         }

  1503.         ,
  1504.         {
  1505.           "name": "张店区",
  1506.           "key": "Z"
  1507.         }
  1508.         ,
  1509.         {
  1510.           "name": "章贡区",
  1511.           "key": "Z"
  1512.         }
  1513.         ,
  1514.         {
  1515.           "name": "张家港",
  1516.           "key": "Z"
  1517.         }
  1518.         ,
  1519.         {
  1520.           "name": "张家界",
  1521.           "key": "Z"
  1522.         }
  1523.         ,
  1524.         {
  1525.           "name": "张家口",
  1526.           "key": "Z"
  1527.         }
  1528.         ,
  1529.         {
  1530.           "name": "漳平市",
  1531.           "key": "Z"
  1532.         }
  1533.         ,

  1534.         {
  1535.           "name": "漳浦县",
  1536.           "key": "Z"
  1537.         }
  1538.         ,

  1539.         {
  1540.           "name": "章丘市",
  1541.           "key": "Z"
  1542.         }
  1543.         ,
  1544.         {
  1545.           "name": "樟树市",
  1546.           "key": "Z"
  1547.         }
  1548.         ,
  1549.         {
  1550.           "name": "张湾区",
  1551.           "key": "Z"
  1552.         },
  1553.         {
  1554.           "name": "彰武县",
  1555.           "key": "Z"
  1556.         },
  1557.         {
  1558.           "name": "漳县",
  1559.           "key": "Z"
  1560.         },
  1561.         {
  1562.           "name": "张掖",
  1563.           "key": "Z"
  1564.         },
  1565.         {
  1566.           "name": "漳州",
  1567.           "key": "Z"
  1568.         },
  1569.         {
  1570.           "name": "长子县",
  1571.           "key": "Z"
  1572.         }
  1573.         ,

  1574.         {
  1575.           "name": "湛河区",
  1576.           "key": "Z"
  1577.         }
  1578.         ,
  1579.         {
  1580.           "name": "湛江",
  1581.           "key": "Z"
  1582.         }
  1583.         ,

  1584.         {
  1585.           "name": "站前区",
  1586.           "key": "Z"
  1587.         }
  1588.         ,
  1589.         {
  1590.           "name": "沾益县",
  1591.           "key": "Z"
  1592.         }
  1593.         ,
  1594.         {
  1595.           "name": "诏安县",
  1596.           "key": "Z"
  1597.         },
  1598.         {
  1599.           "name": "召陵区",
  1600.           "key": "Z"
  1601.         },
  1602.         {
  1603.           "name": "昭平县",
  1604.           "key": "Z"
  1605.         },
  1606.         {
  1607.           "name": "肇庆",
  1608.           "key": "Z"
  1609.         },
  1610.         {
  1611.           "name": "昭通",
  1612.           "key": "Z"
  1613.         },
  1614.         {
  1615.           "name": "赵县",
  1616.           "key": "Z"
  1617.         }

  1618.       ]
  1619.     }
  1620.   ]
  1621. }
  1622. module.exports = city;
复制代码

以上就是全部代码,大家可以再自己的项目中部署,谢谢大家,欢迎大牛拍砖。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com