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

 class="title">  class="title_list" value="{{cityName}}" placeholder="城市名称" /> 确认  scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">   wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">    id="{{idx}}" class="list_tit">{{idx}}    wx:for="{{cityName}}">     class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}      class="scroll_list"    bindtouchstart="chStart"   bindtouchend="chEnd"   catchtouchmove="chMove"   style="background: rgba(0,0,0,{{trans}});"   >  wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">    wx:if="{{idx != '热门城市'}}">    id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}      hidden="{{hidden}}" class="showwords"> {{showwords}}

/**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;  }

//先引用城市数据文件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 }) }})

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;