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

作者: 陈楠酒肆 | 来源:发表于2017-07-25 21:06 被阅读372次

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

    项目截图

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

    一、创建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),同时您也可以扫描下方的二维码关注我们的公众号,每天我们都会分享经验,谢谢大家。

    相关文章

      网友评论

      • 请说Yes:如果字母的数组是onload获取的且长度不确定,要怎么计算每个字母的lineHeight
        陈楠酒肆:@请说Yes 恩,不错:smile:
        请说Yes:哦知道了,onread里能取到字母数组的长度

      本文标题:微信小程序中根据字母选择城市

      本文链接:https://www.haomeiwen.com/subject/ahygkxtx.html