微信小程序实现城市列表的选择

这篇文章主要为大家详细介绍了微信小程序实现城市列表选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下

实现效果预览

 

实现功能简介

• 城市的选择

• 按中文/拼音/首字母条件搜索

• 按首字字母快速定位到城市位置
  

目录结构

主要代码

app.js

App({
 globalData: {
 trainBeginCity: '杭州',
 trainEndCity: '北京'
 }
})

app.json

{
 "pages":[
 "pages/index/index",
 "pages/citys/citys"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black",
 "enablePullDownRefresh": true
 }
}

index.wxml

<view class=&#39;warning-top&#39;>测试消息消息这是测试消息啊啊啊</view>
<form bindsubmit="formSubmit" bindreset="formReset" class=&#39;form-content&#39;>
 <view class=&#39;flex-box&#39; data-id=&#39;出发城市&#39;>
 <view class=&#39;flex-box-header&#39;>出发城市</view>
 <view class="flex-box-content">
 <input name=&#39;beginCity&#39; value=&#39;{{begin}}&#39; disabled=&#39;disabled&#39; placeholder="" bindtap=&#39;bindBeginCityView&#39; class=&#39;input-city&#39;/>
 </view>
 </view>

 <view class="flex-box" data-id=&#39;目的城市&#39;>
 <view class=&#39;flex-box-header&#39;>目的城市</view>
 <view class="flex-box-content">
 <input name=&#39;endCity&#39; value=&#39;{{end}}&#39; placeholder="" disabled=&#39;disabled&#39; bindtap=&#39;bindEndCityView&#39; class=&#39;input-city&#39;/>
 </view>
 </view>

 <view class="flex-box">
 <view class=&#39;flex-box-header&#39;>出发日期</view>
 <picker mode="date" name=&#39;leaveDate&#39; class=&#39;flex-box-content-pricker&#39; value="{{date}}" start="2018-01-01" end="2019-09-01" bindchange="bindDateChange" >
 <view class=&#39;input-city&#39;>{{date}}</view>
 </picker>
 </view>

 <view class="btn-area">
 <button formType="submit" class=&#39;btn-query&#39;>查询</button>
 </view>
</form>

index.js

const app = getApp()

Page({
 data: {
 begin: '',
 end: '',
 date: null
 },

 formSubmit: function (e) {
 // console.log('form发生了submit事件，携带数据为：', e.detail.value)
 wx.navigateTo({
 url: '../trains/trains?beginCity=' + e.detail.value.beginCity + "&endCity=" + e.detail.value.endCity + "&leaveDate=" + e.detail.value.leaveDate,
 })
 },
 formReset: function () {
 console.log('form发生了reset事件')
 },
 bindDateChange: function (e) {
 this.setData({
 date: e.detail.value
 })
 },
 onLoad: function (options) {
 // wx.navigateTo({
 // url: '../citys/citys?cityType=begin',
 // })


 if (this.data.date == null || this.data.date.trim() == "") {
 var day = new Date()
 day.setTime(day.getTime() + 24 * 60 * 60 * 1000);
 var year = day.getFullYear(); //年
 var month = day.getMonth() + 1; //月
 var day = day.getDate();  //日

 if (month < 10) { month = "0" + month; }
 if (day < 10) { day = "0" + day; }
 this.setData({ date: year + &#39;-&#39; + month + &#39;-&#39; + day })
 }
 }, onPullDownRefresh: function () {
 wx.stopPullDownRefresh();
 }, bindBeginCityView: function () {
 wx.navigateTo({
 url: &#39;../citys/citys?cityType=begin&#39;,
 })
 }, bindEndCityView: function () {
 wx.navigateTo({
 url: &#39;../citys/citys?cityType=end&#39;,
 })
 }, onShow: function () {
 this.setData({ begin: app.globalData.trainBeginCity })
 this.setData({ end: app.globalData.trainEndCity })
 }


})

index.wxss

.flex-box {
 display: flex;
 flex-direction: row;
 border-bottom: #CCCCCC solid 1px;
 margin: 28rpx;
 width: 600rpx;
 padding:10rpx;
 height: 70rpx;
}

.btn-area{
 margin: 30rpx;
 width: 600rpx;
}

.flex-box-header{
 width: 25%;
 font-size: 30rpx;
 margin-top: 10rpx;
 color: #999999;

 /* line-height: 60rpx; */
}

.flex-box-content{
 width: 70%;
 margin-top: 0rpx; 
 font-size: 45rpx;
}
.flex-box-content-pricker{
 margin-top: 0rpx; 
 width: 70%;
 font-size: 45rpx;
}

.form-content{
 margin-top:30rpx; 
 display: flex;
 margin-left: 5%;
 width: 90%;
 background-color: #FFFFFF;
 border-radius: 20rpx;
 /* border: 3rpx solid #CCCCCC; */
 height: 530rpx;
}

.bus-view{
 display: flex;
 flex-direction: row;
 width: 700rpx;
 height: 100rpx;
 margin:20rpx;
 font-size: 30rpx;
 border-bottom: 1rpx solid #CCCCCC; 
}

.bus-view-left{
 text-align: center;
 line-height: 100rpx;
 font-size: 30rpx;
 width: 200rpx;
 /* border-right: 1rpx solid #CCCCCC; */
}

.bus-view-right{
 width: 300rpx;
 display: flex;
 flex-direction: column;
 font-size: 28rpx;
 /* border: 1rpx solid #CCCCCC; */
}

.bus-view-right-item{
 text-align: center;
 margin: 5rpx;
}

.btn-query{
 background-color:#3399CC;
 color:#FFFFFF;
}


.input-city{
 /* border: 1rpx solid #CCCCCC; */
}

citys.wxml

<view class="search-box">
 <input placeholder="中文/拼音/首字母" class=&#39;search-input&#39; bindinput=&#39;bindSarchInput&#39; placeholder-class=&#39;search-input-placeholder&#39; />
</view>
<view class=&#39;a-z&#39;>
 <view wx:for="{{cityAZ}}" wx:key="unique">
 <view data-id=&#39;{{item.cityName}}&#39; bindtap=&#39;bindAZ&#39;>{{item.cityName}}</view>
 </view>
</view>
<view class=&#39;city-item-content&#39;>
 <view wx:for="{{cityResults}}" wx:key="unique">
 <view wx:if="{{item.cityPinYin.length > 1}}" class=&#39;city-item&#39; data-cityname=&#39;{{item.cityName}}&#39; bindtap=&#39;citySelected&#39;>{{item.cityName}}</view>
 <view wx:else class=&#39;city-item-A-Z&#39; data-cityname=&#39;{{item.cityName}}&#39;>{{item.cityName}}</view>
 <!-- <view data-cityname=&#39;{{item.cityName}}&#39; bindtap=&#39;citySelected&#39; >{{item.cityName}}</view> -->
 </view>
</view>

citys.js

const app = getApp()

Page({
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.setData({
 cityType: options.cityType
 })
 if (this.data.cityResults == null) {
 this.setData({
 cityResults: this.data.citys
 })
 }
 },
 bindAZ: function (e) {
 var currentCityName = e.currentTarget.dataset.id
 var that = this;
 //放入A-Z的scrollTop参数
 if (that.data.scrollAZ == null) {
 wx.createSelectorQuery().selectAll('.city-item-A-Z').fields({
 dataset: true,
 size: true,
 rect: true
 }, function (res) {
 res.forEach(function (re) {
  if (currentCityName == re.dataset.cityname) {
  wx.pageScrollTo({
  scrollTop: re.top + that.data.scrollNow - 55.5,
  duration: 0
  })
  }
 })
 }).exec();
 } else {
 this.data.scrollAZ.forEach(function (re) {
 if (currentCityName == re.dataset.cityname) {
  wx.pageScrollTo({
  scrollTop: re.top + that.data.scrollNow - 55.5,
  duration: 0
  })
 }
 })
 }


 },
 onPageScroll: function (e) { // 获取滚动条当前位置
 this.setData({
 scrollNow: e.scrollTop
 })
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },
 citySelected: function (e) {
 var cityNameTemp = e.currentTarget.dataset.cityname

 if (this.data.cityType == 'begin') {
 app.globalData.trainBeginCity = cityNameTemp
 }

 if (this.data.cityType == "end") {
 app.globalData.trainEndCity = cityNameTemp
 }

 wx.navigateBack()
 },
 bindSarchInput: function (e) {
 wx.pageScrollTo({
 scrollTop: 0,
 duration: 0
 })

 var inputVal = e.detail.value;
 var cityResultsTemp = new Array()
 var citys = this.data.citys;

 if (inputVal == null || inputVal.trim() == '') {
 this.setData({
 cityResults: citys
 })
 return;
 }

 for (var i = 0; i < citys.length; i++) {
 if (citys[i].cityName.indexOf(inputVal) == 0 || citys[i].cityPY.indexOf(inputVal.toLowerCase()) == 0 || citys[i].cityPinYin.indexOf(inputVal.toLowerCase()) == 0) {
 //去除热门城市
 if (citys[i].cityPY.indexOf("#") != -1) {
  continue;
 }
 var ifHas = false;
 for (var j = 0; j < cityResultsTemp.length; j++) {
  if (cityResultsTemp[j] == citys[i]) {
  ifHas = true;
  break;
  }
 }
 if (!ifHas) {
  cityResultsTemp.push(citys[i]);
 }
 }
 }
 this.setData({
 cityResults: cityResultsTemp
 })
 },
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

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

 },

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

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 setTimeout(function () {
 wx.stopPullDownRefresh();
 }, 1000)

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }, /**
 * 页面的初始数据
 */
 data: {
 scrollAZ: null,
 scrollNow: 0,
 cityType: &#39;begin&#39;,
 cityResults: null,
 cityAZ: [{ cityName: &#39;热门&#39; }, { cityName: &#39;A&#39; }, { cityName: &#39;B&#39; }, { cityName: &#39;C&#39; }, { cityName: &#39;D&#39; }, { cityName: &#39;E&#39; }, { cityName: &#39;F&#39; }, { cityName: &#39;G&#39; }, { cityName: &#39;H&#39; }, { cityName: &#39;J&#39; }, { cityName: &#39;K&#39; }, { cityName: &#39;L&#39; }, { cityName: &#39;M&#39; }, { cityName: &#39;N&#39; }, { cityName: &#39;P&#39; }, { cityName: &#39;Q&#39; }, { cityName: &#39;R&#39; }, { cityName: &#39;S&#39; }, { cityName: &#39;T&#39; }, { cityName: &#39;W&#39; }, { cityName: &#39;X&#39; }, { cityName: &#39;Y&#39; }, { cityName: &#39;Z&#39; },],
 citys: [{ cityName: &#39;热门&#39;, cityPinYin: &#39;&#39;, cityPY: &#39;&#39; }, { cityName: &#39;上海&#39;, cityPinYin: &#39;##&#39;, cityPY: &#39;##&#39; }, { cityName: &#39;北京&#39;, cityPinYin: &#39;##&#39;, cityPY: &#39;##&#39; }, { cityName: &#39;广州&#39;, cityPinYin: &#39;##&#39;, cityPY: &#39;##&#39; }, { cityName: &#39;深圳&#39;, cityPinYin: &#39;##&#39;, cityPY: &#39;##&#39; }, { cityName: &#39;杭州&#39;, cityPinYin: &#39;##&#39;, cityPY: &#39;##&#39; }, { cityName: &#39;A&#39;, cityPinYin: &#39;a&#39;, cityPY: &#39;a&#39; }, { cityName: &#39;阿克苏&#39;, cityPinYin: &#39;akesu&#39;, cityPY: &#39;aks&#39; }, { cityName: &#39;安康&#39;, cityPinYin: &#39;ankang&#39;, cityPY: &#39;ak&#39; }, { cityName: &#39;安陆&#39;, cityPinYin: &#39;anlu&#39;, cityPY: &#39;al&#39; }, { cityName: &#39;安庆&#39;, cityPinYin: &#39;anqing&#39;, cityPY: &#39;aq&#39; }, { cityName: &#39;鞍山&#39;, cityPinYin: &#39;anshan&#39;, cityPY: &#39;as&#39; }, { cityName: &#39;安顺&#39;, cityPinYin: &#39;anshun&#39;, cityPY: &#39;as&#39; }, { cityName: &#39;安阳&#39;, cityPinYin: &#39;anyang&#39;, cityPY: &#39;ay&#39; }, { cityName: &#39;B&#39;, cityPinYin: &#39;b&#39;, cityPY: &#39;b&#39; }, { cityName: &#39;白城&#39;, cityPinYin: &#39;baicheng&#39;, cityPY: &#39;bc&#39; }, { cityName: &#39;蚌埠&#39;, cityPinYin: &#39;bangbu&#39;, cityPY: &#39;bb&#39; }, { cityName: &#39;保定&#39;, cityPinYin: &#39;baoding&#39;, cityPY: &#39;bd&#39; }, { cityName: &#39;宝鸡&#39;, cityPinYin: &#39;baoji&#39;, cityPY: &#39;bj&#39; }, { cityName: &#39;包头&#39;, cityPinYin: &#39;baotou&#39;, cityPY: &#39;bt&#39; }, { cityName: &#39;鲅鱼圈&#39;, cityPinYin: &#39;bayuquan&#39;, cityPY: &#39;byq&#39; }, { cityName: &#39;巴中&#39;, cityPinYin: &#39;bazhong&#39;, cityPY: &#39;bz&#39; }, { cityName: &#39;北戴河&#39;, cityPinYin: &#39;beidaihe&#39;, cityPY: &#39;bdh&#39; }, { cityName: &#39;北海&#39;, cityPinYin: &#39;beihai&#39;, cityPY: &#39;bh&#39; }, { cityName: &#39;北京&#39;, cityPinYin: &#39;beijing&#39;, cityPY: &#39;bj&#39; }, { cityName: &#39;博乐&#39;, cityPinYin: &#39;bole&#39;, cityPY: &#39;bl&#39; }, { cityName: &#39;C&#39;, cityPinYin: &#39;c&#39;, cityPY: &#39;c&#39; }, { cityName: &#39;苍南&#39;, cityPinYin: &#39;cangnan&#39;, cityPY: &#39;cn&#39; }, { cityName: &#39;沧州&#39;, cityPinYin: &#39;cangzhou&#39;, cityPY: &#39;cz&#39; }, { cityName: &#39;常德&#39;, cityPinYin: &#39;changde&#39;, cityPY: &#39;cd&#39; }, { cityName: &#39;常州&#39;, cityPinYin: &#39;changzhou&#39;, cityPY: &#39;cz&#39; }, { cityName: &#39;巢湖&#39;, cityPinYin: &#39;chaohu&#39;, cityPY: &#39;ch&#39; }, { cityName: &#39;潮州&#39;, cityPinYin: &#39;chaozhou&#39;, cityPY: &#39;cz&#39; }, { cityName: &#39;承德&#39;, cityPinYin: &#39;chengde&#39;, cityPY: &#39;cd&#39; }, { cityName: &#39;成都&#39;, cityPinYin: &#39;chengdou&#39;, cityPY: &#39;cd&#39; }, { cityName: &#39;郴州&#39;, cityPinYin: &#39;chenzhou&#39;, cityPY: &#39;cz&#39; }, { cityName: &#39;赤壁&#39;, cityPinYin: &#39;chibi&#39;, cityPY: &#39;cb&#39; }, { cityName: &#39;赤峰&#39;, cityPinYin: &#39;chifeng&#39;, cityPY: &#39;cf&#39; }, { cityName: &#39;滁州&#39;, cityPinYin: &#39;chuzhou&#39;, cityPY: &#39;cz&#39; }, { cityName: &#39;D&#39;, cityPinYin: &#39;d&#39;, cityPY: &#39;d&#39; }, { cityName: &#39;大理&#39;, cityPinYin: &#39;dali&#39;, cityPY: &#39;dl&#39; }, { cityName: &#39;大连&#39;, cityPinYin: &#39;dalian&#39;, cityPY: &#39;dl&#39; }, { cityName: &#39;丹东&#39;, cityPinYin: &#39;dandong&#39;, cityPY: &#39;dd&#39; }, { cityName: &#39;大庆&#39;, cityPinYin: &#39;daqing&#39;, cityPY: &#39;dq&#39; }, { cityName: &#39;大同&#39;, cityPinYin: &#39;datong&#39;, cityPY: &#39;dt&#39; }, { cityName: &#39;达州&#39;, cityPinYin: &#39;dazhou&#39;, cityPY: &#39;dz&#39; }, { cityName: &#39;德令哈&#39;, cityPinYin: &#39;delingha&#39;, cityPY: &#39;dlh&#39; }, { cityName: &#39;德清&#39;, cityPinYin: &#39;deqing&#39;, cityPY: &#39;dq&#39; }, { cityName: &#39;德阳&#39;, cityPinYin: &#39;deyang&#39;, cityPY: &#39;dy&#39; }, { cityName: &#39;德州&#39;, cityPinYin: &#39;dezhou&#39;, cityPY: &#39;dz&#39; }, { cityName: &#39;定远&#39;, cityPinYin: &#39;dingyuan&#39;, cityPY: &#39;dy&#39; }, { cityName: &#39;东莞&#39;, cityPinYin: &#39;dongguan&#39;, cityPY: &#39;dg&#39; }, { cityName: &#39;东海县&#39;, cityPinYin: &#39;donghaixian&#39;, cityPY: &#39;dhx&#39; }, { cityName: &#39;东胜&#39;, cityPinYin: &#39;dongsheng&#39;, cityPY: &#39;ds&#39; }, { cityName: &#39;东营&#39;, cityPinYin: &#39;dongying&#39;, cityPY: &#39;dy&#39; }, { cityName: &#39;都江堰&#39;, cityPinYin: &#39;doujiangyan&#39;, cityPY: &#39;djy&#39; }, { cityName: &#39;敦煌&#39;, cityPinYin: &#39;dunhuang&#39;, cityPY: &#39;dh&#39; }, { cityName: &#39;E&#39;, cityPinYin: &#39;e&#39;, cityPY: &#39;e&#39; }, { cityName: &#39;额济纳&#39;, cityPinYin: &#39;ejina&#39;, cityPY: &#39;ejn&#39; }, { cityName: &#39;峨眉&#39;, cityPinYin: &#39;emei&#39;, cityPY: &#39;em&#39; }, { cityName: &#39;恩施&#39;, cityPinYin: &#39;enshi&#39;, cityPY: &#39;es&#39; }, { cityName: &#39;鄂州&#39;, cityPinYin: &#39;ezhou&#39;, cityPY: &#39;ez&#39; }, { cityName: &#39;F&#39;, cityPinYin: &#39;f&#39;, cityPY: &#39;f&#39; }, { cityName: &#39;佛山&#39;, cityPinYin: &#39;foshan&#39;, cityPY: &#39;fs&#39; }, { cityName: &#39;福安&#39;, cityPinYin: &#39;fuan&#39;, cityPY: &#39;fa&#39; }, { cityName: &#39;福鼎&#39;, cityPinYin: &#39;fuding&#39;, cityPY: &#39;fd&#39; }, { cityName: &#39;涪陵&#39;, cityPinYin: &#39;fuling&#39;, cityPY: &#39;fl&#39; }, { cityName: &#39;福清&#39;, cityPinYin: &#39;fuqing&#39;, cityPY: &#39;fq&#39; }, { cityName: &#39;抚顺&#39;, cityPinYin: &#39;fushun&#39;, cityPY: &#39;fs&#39; }, { cityName: &#39;阜新&#39;, cityPinYin: &#39;fuxin&#39;, cityPY: &#39;fx&#39; }, { cityName: &#39;阜阳&#39;, cityPinYin: &#39;fuyang&#39;, cityPY: &#39;fy&#39; }, { cityName: &#39;抚州&#39;, cityPinYin: &#39;fuzhou&#39;, cityPY: &#39;fz&#39; }, { cityName: &#39;福州&#39;, cityPinYin: &#39;fuzhou&#39;, cityPY: &#39;fz&#39; }, { cityName: &#39;G&#39;, cityPinYin: &#39;g&#39;, cityPY: &#39;g&#39; }, { cityName: &#39;赣州&#39;, cityPinYin: &#39;ganzhou&#39;, cityPY: &#39;gz&#39; }, { cityName: &#39;高密&#39;, cityPinYin: &#39;gaomi&#39;, cityPY: &#39;gm&#39; }, { cityName: &#39;格尔木&#39;, cityPinYin: &#39;geermu&#39;, cityPY: &#39;gem&#39; }, { cityName: &#39;广安&#39;, cityPinYin: &#39;guangan&#39;, cityPY: &#39;ga&#39; }, { cityName: &#39;广元&#39;, cityPinYin: &#39;guangyuan&#39;, cityPY: &#39;gy&#39; }, { cityName: &#39;广州&#39;, cityPinYin: &#39;guangzhou&#39;, cityPY: &#39;gz&#39; }, { cityName: &#39;桂林&#39;, cityPinYin: &#39;guilin&#39;, cityPY: &#39;gl&#39; }, { cityName: &#39;贵阳&#39;, cityPinYin: &#39;guiyang&#39;, cityPY: &#39;gy&#39; }, { cityName: &#39;H&#39;, cityPinYin: &#39;h&#39;, cityPY: &#39;h&#39; }, { cityName: &#39;哈尔滨&#39;, cityPinYin: &#39;haerbin&#39;, cityPY: &#39;heb&#39; }, { cityName: &#39;海城&#39;, cityPinYin: &#39;haicheng&#39;, cityPY: &#39;hc&#39; }, { cityName: &#39;海口&#39;, cityPinYin: &#39;haikou&#39;, cityPY: &#39;hk&#39; }, { cityName: &#39;海拉尔&#39;, cityPinYin: &#39;hailaer&#39;, cityPY: &#39;hle&#39; }, { cityName: &#39;海宁&#39;, cityPinYin: &#39;haining&#39;, cityPY: &#39;hn&#39; }, { cityName: &#39;哈密&#39;, cityPinYin: &#39;hami&#39;, cityPY: &#39;hm&#39; }, { cityName: &#39;邯郸&#39;, cityPinYin: &#39;handan&#39;, cityPY: &#39;hd&#39; }, { cityName: &#39;杭州&#39;, cityPinYin: &#39;hangzhou&#39;, cityPY: &#39;hz&#39; }, { cityName: &#39;涵江&#39;, cityPinYin: &#39;hanjiang&#39;, cityPY: &#39;hj&#39; }, { cityName: &#39;汉中&#39;, cityPinYin: &#39;hanzhong&#39;, cityPY: &#39;hz&#39; }, { cityName: &#39;鹤壁&#39;, cityPinYin: &#39;hebi&#39;, cityPY: &#39;hb&#39; }, { cityName: &#39;合川&#39;, cityPinYin: &#39;hechuan&#39;, cityPY: &#39;hc&#39; }, { cityName: &#39;合肥&#39;, cityPinYin: &#39;hefei&#39;, cityPY: &#39;hf&#39; }, { cityName: &#39;鹤岗&#39;, cityPinYin: &#39;hegang&#39;, cityPY: &#39;hg&#39; }, { cityName: &#39;黑河&#39;, cityPinYin: &#39;heihe&#39;, cityPY: &#39;hh&#39; }, { cityName: &#39;衡山&#39;, cityPinYin: &#39;hengshan&#39;, cityPY: &#39;hs&#39; }, { cityName: &#39;衡水&#39;, cityPinYin: &#39;hengshui&#39;, cityPY: &#39;hs&#39; }, { cityName: &#39;衡阳&#39;, cityPinYin: &#39;hengyang&#39;, cityPY: &#39;hy&#39; }, { cityName: &#39;菏泽&#39;, cityPinYin: &#39;heze&#39;, cityPY: &#39;hz&#39; }, { cityName: &#39;淮安&#39;, cityPinYin: &#39;huaian&#39;, cityPY: &#39;ha&#39; }, { cityName: &#39;淮北&#39;, cityPinYin: &#39;huaibei&#39;, cityPY: &#39;hb&#39; }, { cityName: &#39;怀化&#39;, cityPinYin: &#39;huaihua&#39;, cityPY: &#39;hh&#39; }, { cityName: &#39;淮南&#39;, cityPinYin: &#39;huainan&#39;, cityPY: &#39;hn&#39; }, { cityName: &#39;黄山&#39;, cityPinYin: &#39;huangshan&#39;, cityPY: &#39;hs&#39; }, { cityName: &#39;黄石&#39;, cityPinYin: &#39;huangshi&#39;, cityPY: &#39;hs&#39; }, { cityName: &#39;呼和浩特&#39;, cityPinYin: &#39;huhehaote&#39;, cityPY: &#39;hhht&#39; }, { cityName: &#39;惠州&#39;, cityPinYin: &#39;huizhou&#39;, cityPY: &#39;hz&#39; }, { cityName: &#39;葫芦岛&#39;, cityPinYin: &#39;huludao&#39;, cityPY: &#39;hld&#39; }, { cityName: &#39;湖州&#39;, cityPinYin: &#39;huzhou&#39;, cityPY: &#39;hz&#39; }, { cityName: &#39;J&#39;, cityPinYin: &#39;j&#39;, cityPY: &#39;j&#39; }, { cityName: &#39;佳木斯&#39;, cityPinYin: &#39;jiamusi&#39;, cityPY: &#39;jms&#39; }, { cityName: &#39;吉安&#39;, cityPinYin: &#39;jian&#39;, cityPY: &#39;ja&#39; }, { cityName: &#39;江门&#39;, cityPinYin: &#39;jiangmen&#39;, cityPY: &#39;jm&#39; }, { cityName: &#39;江山&#39;, cityPinYin: &#39;jiangshan&#39;, cityPY: &#39;js&#39; }, { cityName: &#39;胶州&#39;, cityPinYin: &#39;jiaozhou&#39;, cityPY: &#39;jz&#39; }, { cityName: &#39;嘉善&#39;, cityPinYin: &#39;jiashan&#39;, cityPY: &#39;js&#39; }, { cityName: &#39;嘉兴&#39;, cityPinYin: &#39;jiaxing&#39;, cityPY: &#39;jx&#39; }, { cityName: &#39;嘉峪关&#39;, cityPinYin: &#39;jiayuguan&#39;, cityPY: &#39;jyg&#39; }, { cityName: &#39;揭阳&#39;, cityPinYin: &#39;jieyang&#39;, cityPY: &#39;jy&#39; }, { cityName: &#39;吉林&#39;, cityPinYin: &#39;jilin&#39;, cityPY: &#39;jl&#39; }, { cityName: &#39;济南&#39;, cityPinYin: &#39;jinan&#39;, cityPY: &#39;jn&#39; }, { cityName: &#39;晋城&#39;, cityPinYin: &#39;jincheng&#39;, cityPY: &#39;jc&#39; }, { cityName: &#39;景德镇&#39;, cityPinYin: &#39;jingdezhen&#39;, cityPY: &#39;jdz&#39; }, { cityName: &#39;荆门&#39;, cityPinYin: &#39;jingmen&#39;, cityPY: &#39;jm&#39; }, { cityName: &#39;荆州&#39;, cityPinYin: &#39;jingzhou&#39;, cityPY: &#39;jz&#39; }, { cityName: &#39;金华&#39;, cityPinYin: &#39;jinhua&#39;, cityPY: &#39;jh&#39; }, { cityName: &#39;集宁&#39;, cityPinYin: &#39;jining&#39;, cityPY: &#39;jn&#39; }, { cityName: &#39;济宁&#39;, cityPinYin: &#39;jining&#39;, cityPY: &#39;jn&#39; }, { cityName: &#39;晋江&#39;, cityPinYin: &#39;jinjiang&#39;, cityPY: &#39;jj&#39; }, { cityName: &#39;锦州&#39;, cityPinYin: &#39;jinzhou&#39;, cityPY: &#39;jz&#39; }, { cityName: &#39;吉首&#39;, cityPinYin: &#39;jishou&#39;, cityPY: &#39;js&#39; }, { cityName: &#39;九江&#39;, cityPinYin: &#39;jiujiang&#39;, cityPY: &#39;jj&#39; }, { cityName: &#39;酒泉&#39;, cityPinYin: &#39;jiuquan&#39;, cityPY: &#39;jq&#39; }, { cityName: &#39;鸡西&#39;, cityPinYin: &#39;jixi&#39;, cityPY: &#39;jx&#39; }, { cityName: &#39;K&#39;, cityPinYin: &#39;k&#39;, cityPY: &#39;k&#39; }, { cityName: &#39;开封&#39;, cityPinYin: &#39;kaifeng&#39;, cityPY: &#39;kf&#39; }, { cityName: &#39;凯里&#39;, cityPinYin: &#39;kaili&#39;, cityPY: &#39;kl&#39; }, { cityName: &#39;喀什&#39;, cityPinYin: &#39;kashen&#39;, cityPY: &#39;ks&#39; }, { cityName: &#39;库尔勒&#39;, cityPinYin: &#39;kuerle&#39;, cityPY: &#39;kel&#39; }, { cityName: &#39;昆明&#39;, cityPinYin: &#39;kunming&#39;, cityPY: &#39;km&#39; }, { cityName: &#39;昆山&#39;, cityPinYin: &#39;kunshan&#39;, cityPY: &#39;ks&#39; }, { cityName: &#39;L&#39;, cityPinYin: &#39;l&#39;, cityPY: &#39;l&#39; }, { cityName: &#39;廊坊&#39;, cityPinYin: &#39;langfang&#39;, cityPY: &#39;lf&#39; }, { cityName: &#39;兰州&#39;, cityPinYin: &#39;lanzhou&#39;, cityPY: &#39;lz&#39; }, { cityName: &#39;拉萨&#39;, cityPinYin: &#39;lasa&#39;, cityPY: &#39;ls&#39; }, { cityName: &#39;耒阳&#39;, cityPinYin: &#39;leiyang&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;乐清&#39;, cityPinYin: &#39;leqing&#39;, cityPY: &#39;lq&#39; }, { cityName: &#39;梁平&#39;, cityPinYin: &#39;liangping&#39;, cityPY: &#39;lp&#39; }, { cityName: &#39;连江&#39;, cityPinYin: &#39;lianjiang&#39;, cityPY: &#39;lj&#39; }, { cityName: &#39;连云港&#39;, cityPinYin: &#39;lianyungang&#39;, cityPY: &#39;lyg&#39; }, { cityName: &#39;聊城&#39;, cityPinYin: &#39;liaocheng&#39;, cityPY: &#39;lc&#39; }, { cityName: &#39;辽阳&#39;, cityPinYin: &#39;liaoyang&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;辽源&#39;, cityPinYin: &#39;liaoyuan&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;丽江&#39;, cityPinYin: &#39;lijiang&#39;, cityPY: &#39;lj&#39; }, { cityName: &#39;临汾&#39;, cityPinYin: &#39;linfen&#39;, cityPY: &#39;lf&#39; }, { cityName: &#39;陵水&#39;, cityPinYin: &#39;lingshui&#39;, cityPY: &#39;ls&#39; }, { cityName: &#39;临海&#39;, cityPinYin: &#39;linhai&#39;, cityPY: &#39;lh&#39; }, { cityName: &#39;临河&#39;, cityPinYin: &#39;linhe&#39;, cityPY: &#39;lh&#39; }, { cityName: &#39;临沂&#39;, cityPinYin: &#39;linyi&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;六安&#39;, cityPinYin: &#39;liuan&#39;, cityPY: &#39;la&#39; }, { cityName: &#39;六盘水&#39;, cityPinYin: &#39;liupanshui&#39;, cityPY: &#39;lps&#39; }, { cityName: &#39;柳州&#39;, cityPinYin: &#39;liuzhou&#39;, cityPY: &#39;lz&#39; }, { cityName: &#39;溧阳&#39;, cityPinYin: &#39;liyang&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;龙岩&#39;, cityPinYin: &#39;longyan&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;龙游&#39;, cityPinYin: &#39;longyou&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;娄底&#39;, cityPinYin: &#39;loudi&#39;, cityPY: &#39;ld&#39; }, { cityName: &#39;吕梁&#39;, cityPinYin: &#39;lu:liang&#39;, cityPY: &#39;ll&#39; }, { cityName: &#39;漯河&#39;, cityPinYin: &#39;luohe&#39;, cityPY: &#39;lh&#39; }, { cityName: &#39;洛阳&#39;, cityPinYin: &#39;luoyang&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;罗源&#39;, cityPinYin: &#39;luoyuan&#39;, cityPY: &#39;ly&#39; }, { cityName: &#39;庐山&#39;, cityPinYin: &#39;lushan&#39;, cityPY: &#39;ls&#39; }, { cityName: &#39;M&#39;, cityPinYin: &#39;m&#39;, cityPY: &#39;m&#39; }, { cityName: &#39;马鞍山&#39;, cityPinYin: &#39;maanshan&#39;, cityPY: &#39;mas&#39; }, { cityName: &#39;满洲里&#39;, cityPinYin: &#39;manzhouli&#39;, cityPY: &#39;mzl&#39; }, { cityName: &#39;美兰&#39;, cityPinYin: &#39;meilan&#39;, cityPY: &#39;ml&#39; }, { cityName: &#39;梅州&#39;, cityPinYin: &#39;meizhou&#39;, cityPY: &#39;mz&#39; }, { cityName: &#39;绵阳&#39;, cityPinYin: &#39;mianyang&#39;, cityPY: &#39;my&#39; }, { cityName: &#39;汨罗&#39;, cityPinYin: &#39;miluo&#39;, cityPY: &#39;ml&#39; }, { cityName: &#39;漠河&#39;, cityPinYin: &#39;mohe&#39;, cityPY: &#39;mh&#39; }, { cityName: &#39;牡丹江&#39;, cityPinYin: &#39;mudanjiang&#39;, cityPY: &#39;mdj&#39; }, { cityName: &#39;N&#39;, cityPinYin: &#39;n&#39;, cityPY: &#39;n&#39; }, { cityName: &#39;南昌&#39;, cityPinYin: &#39;nanchang&#39;, cityPY: &#39;nc&#39; }, { cityName: &#39;南城&#39;, cityPinYin: &#39;nancheng&#39;, cityPY: &#39;nc&#39; }, { cityName: &#39;南充&#39;, cityPinYin: &#39;nanchong&#39;, cityPY: &#39;nc&#39; }, { cityName: &#39;南丰&#39;, cityPinYin: &#39;nanfeng&#39;, cityPY: &#39;nf&#39; }, { cityName: &#39;南京&#39;, cityPinYin: &#39;nanjing&#39;, cityPY: &#39;nj&#39; }, { cityName: &#39;南宁&#39;, cityPinYin: &#39;nanning&#39;, cityPY: &#39;nn&#39; }, { cityName: &#39;南通&#39;, cityPinYin: &#39;nantong&#39;, cityPY: &#39;nt&#39; }, { cityName: &#39;南阳&#39;, cityPinYin: &#39;nanyang&#39;, cityPY: &#39;ny&#39; }, { cityName: &#39;内江&#39;, cityPinYin: &#39;neijiang&#39;, cityPY: &#39;nj&#39; }, { cityName: &#39;宁波&#39;, cityPinYin: &#39;ningbo&#39;, cityPY: &#39;nb&#39; }, { cityName: &#39;宁德&#39;, cityPinYin: &#39;ningde&#39;, cityPY: &#39;nd&#39; }, { cityName: &#39;宁海&#39;, cityPinYin: &#39;ninghai&#39;, cityPY: &#39;nh&#39; }, { cityName: &#39;P&#39;, cityPinYin: &#39;p&#39;, cityPY: &#39;p&#39; }, { cityName: &#39;盘锦&#39;, cityPinYin: &#39;panjin&#39;, cityPY: &#39;pj&#39; }, { cityName: &#39;攀枝花&#39;, cityPinYin: &#39;panzhihua&#39;, cityPY: &#39;pzh&#39; }, { cityName: &#39;平顶山&#39;, cityPinYin: &#39;pingdingshan&#39;, cityPY: &#39;pds&#39; }, { cityName: &#39;萍乡&#39;, cityPinYin: &#39;pingxiang&#39;, cityPY: &#39;px&#39; }, { cityName: &#39;平遥&#39;, cityPinYin: &#39;pingyao&#39;, cityPY: &#39;py&#39; }, { cityName: &#39;莆田&#39;, cityPinYin: &#39;putian&#39;, cityPY: &#39;pt&#39; }, { cityName: &#39;Q&#39;, cityPinYin: &#39;q&#39;, cityPY: &#39;q&#39; }, { cityName: &#39;迁安&#39;, cityPinYin: &#39;qianan&#39;, cityPY: &#39;qa&#39; }, { cityName: &#39;黔江&#39;, cityPinYin: &#39;qianjiang&#39;, cityPY: &#39;qj&#39; }, { cityName: &#39;潜江&#39;, cityPinYin: &#39;qianjiang&#39;, cityPY: &#39;qj&#39; }, { cityName: &#39;蕲春&#39;, cityPinYin: &#39;qichun&#39;, cityPY: &#39;qc&#39; }, { cityName: &#39;青岛&#39;, cityPinYin: &#39;qingdao&#39;, cityPY: &#39;qd&#39; }, { cityName: &#39;清远&#39;, cityPinYin: &#39;qingyuan&#39;, cityPY: &#39;qy&#39; }, { cityName: &#39;青州市&#39;, cityPinYin: &#39;qingzhoushi&#39;, cityPY: &#39;qzs&#39; }, { cityName: &#39;秦皇岛&#39;, cityPinYin: &#39;qinhuangdao&#39;, cityPY: &#39;qhd&#39; }, { cityName: &#39;琼海&#39;, cityPinYin: &#39;qionghai&#39;, cityPY: &#39;qh&#39; }, { cityName: &#39;齐齐哈尔&#39;, cityPinYin: &#39;qiqihaer&#39;, cityPY: &#39;qqhe&#39; }, { cityName: &#39;七台河&#39;, cityPinYin: &#39;qitaihe&#39;, cityPY: &#39;qth&#39; }, { cityName: &#39;泉州&#39;, cityPinYin: &#39;quanzhou&#39;, cityPY: &#39;qz&#39; }, { cityName: &#39;曲阜&#39;, cityPinYin: &#39;qufu&#39;, cityPY: &#39;qf&#39; }, { cityName: &#39;曲靖&#39;, cityPinYin: &#39;qujing&#39;, cityPY: &#39;qj&#39; }, { cityName: &#39;渠县&#39;, cityPinYin: &#39;quxian&#39;, cityPY: &#39;qx&#39; }, { cityName: &#39;衢州&#39;, cityPinYin: &#39;quzhou&#39;, cityPY: &#39;qz&#39; }, { cityName: &#39;R&#39;, cityPinYin: &#39;r&#39;, cityPY: &#39;r&#39; }, { cityName: &#39;任丘&#39;, cityPinYin: &#39;renqiu&#39;, cityPY: &#39;rq&#39; }, { cityName: &#39;日照&#39;, cityPinYin: &#39;rizhao&#39;, cityPY: &#39;rz&#39; }, { cityName: &#39;如皋&#39;, cityPinYin: &#39;rugao&#39;, cityPY: &#39;rg&#39; }, { cityName: &#39;瑞安&#39;, cityPinYin: &#39;ruian&#39;, cityPY: &#39;ra&#39; }, { cityName: &#39;乳山&#39;, cityPinYin: &#39;rushan&#39;, cityPY: &#39;rs&#39; }, { cityName: &#39;S&#39;, cityPinYin: &#39;s&#39;, cityPY: &#39;s&#39; }, { cityName: &#39;三门峡&#39;, cityPinYin: &#39;sanmenxia&#39;, cityPY: &#39;smx&#39; }, { cityName: &#39;三门县&#39;, cityPinYin: &#39;sanmenxian&#39;, cityPY: &#39;smx&#39; }, { cityName: &#39;三明&#39;, cityPinYin: &#39;sanming&#39;, cityPY: &#39;sm&#39; }, { cityName: &#39;三亚&#39;, cityPinYin: &#39;sanya&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;厦门&#39;, cityPinYin: &#39;shamen&#39;, cityPY: &#39;sm&#39; }, { cityName: &#39;上海&#39;, cityPinYin: &#39;shanghai&#39;, cityPY: &#39;sh&#39; }, { cityName: &#39;商丘&#39;, cityPinYin: &#39;shangqiu&#39;, cityPY: &#39;sq&#39; }, { cityName: &#39;上饶&#39;, cityPinYin: &#39;shangrao&#39;, cityPY: &#39;sr&#39; }, { cityName: &#39;上虞&#39;, cityPinYin: &#39;shangyu&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;山海关&#39;, cityPinYin: &#39;shanhaiguan&#39;, cityPY: &#39;shg&#39; }, { cityName: &#39;汕头&#39;, cityPinYin: &#39;shantou&#39;, cityPY: &#39;st&#39; }, { cityName: &#39;韶关&#39;, cityPinYin: &#39;shaoguan&#39;, cityPY: &#39;sg&#39; }, { cityName: &#39;绍兴&#39;, cityPinYin: &#39;shaoxing&#39;, cityPY: &#39;sx&#39; }, { cityName: &#39;邵阳&#39;, cityPinYin: &#39;shaoyang&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;神木&#39;, cityPinYin: &#39;shenmu&#39;, cityPY: &#39;sm&#39; }, { cityName: &#39;沈阳&#39;, cityPinYin: &#39;shenyang&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;深圳&#39;, cityPinYin: &#39;shenzhen&#39;, cityPY: &#39;sz&#39; }, { cityName: &#39;石家庄&#39;, cityPinYin: &#39;shijiazhuang&#39;, cityPY: &#39;sjz&#39; }, { cityName: &#39;十堰&#39;, cityPinYin: &#39;shiyan&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;双鸭山&#39;, cityPinYin: &#39;shuangyashan&#39;, cityPY: &#39;sys&#39; }, { cityName: &#39;四平&#39;, cityPinYin: &#39;siping&#39;, cityPY: &#39;sp&#39; }, { cityName: &#39;松江&#39;, cityPinYin: &#39;songjiang&#39;, cityPY: &#39;sj&#39; }, { cityName: &#39;松原&#39;, cityPinYin: &#39;songyuan&#39;, cityPY: &#39;sy&#39; }, { cityName: &#39;松滋&#39;, cityPinYin: &#39;songzi&#39;, cityPY: &#39;sz&#39; }, { cityName: &#39;绥德&#39;, cityPinYin: &#39;suide&#39;, cityPY: &#39;sd&#39; }, { cityName: &#39;绥芬河&#39;, cityPinYin: &#39;suifenhe&#39;, cityPY: &#39;sfh&#39; }, { cityName: &#39;遂宁&#39;, cityPinYin: &#39;suining&#39;, cityPY: &#39;sn&#39; }, { cityName: &#39;随州&#39;, cityPinYin: &#39;suizhou&#39;, cityPY: &#39;sz&#39; }, { cityName: &#39;苏州&#39;, cityPinYin: &#39;suzhou&#39;, cityPY: &#39;sz&#39; }, { cityName: &#39;宿州&#39;, cityPinYin: &#39;suzhou&#39;, cityPY: &#39;sz&#39; }, { cityName: &#39;T&#39;, cityPinYin: &#39;t&#39;, cityPY: &#39;t&#39; }, { cityName: &#39;泰安&#39;, cityPinYin: &#39;taian&#39;, cityPY: &#39;ta&#39; }, { cityName: &#39;台安&#39;, cityPinYin: &#39;taian&#39;, cityPY: &#39;ta&#39; }, { cityName: &#39;泰宁&#39;, cityPinYin: &#39;taining&#39;, cityPY: &#39;tn&#39; }, { cityName: &#39;太原&#39;, cityPinYin: &#39;taiyuan&#39;, cityPY: &#39;ty&#39; }, { cityName: &#39;台州&#39;, cityPinYin: &#39;taizhou&#39;, cityPY: &#39;tz&#39; }, { cityName: &#39;泰州&#39;, cityPinYin: &#39;taizhou&#39;, cityPY: &#39;tz&#39; }, { cityName: &#39;唐山&#39;, cityPinYin: &#39;tangshan&#39;, cityPY: &#39;ts&#39; }, { cityName: &#39;滕州&#39;, cityPinYin: &#39;tengzhou&#39;, cityPY: &#39;tz&#39; }, { cityName: &#39;天津&#39;, cityPinYin: &#39;tianjin&#39;, cityPY: &#39;tj&#39; }, { cityName: &#39;天门&#39;, cityPinYin: &#39;tianmen&#39;, cityPY: &#39;tm&#39; }, { cityName: &#39;天水&#39;, cityPinYin: &#39;tianshui&#39;, cityPY: &#39;ts&#39; }, { cityName: &#39;铁岭&#39;, cityPinYin: &#39;tieling&#39;, cityPY: &#39;tl&#39; }, { cityName: &#39;桐城&#39;, cityPinYin: &#39;tongcheng&#39;, cityPY: &#39;tc&#39; }, { cityName: &#39;通化&#39;, cityPinYin: &#39;tonghua&#39;, cityPY: &#39;th&#39; }, { cityName: &#39;通辽&#39;, cityPinYin: &#39;tongliao&#39;, cityPY: &#39;tl&#39; }, { cityName: &#39;铜陵&#39;, cityPinYin: &#39;tongling&#39;, cityPY: &#39;tl&#39; }, { cityName: &#39;铜仁&#39;, cityPinYin: &#39;tongren&#39;, cityPY: &#39;tr&#39; }, { cityName: &#39;桐乡&#39;, cityPinYin: &#39;tongxiang&#39;, cityPY: &#39;tx&#39; }, { cityName: &#39;吐鲁番&#39;, cityPinYin: &#39;tulufan&#39;, cityPY: &#39;tlf&#39; }, { cityName: &#39;W&#39;, cityPinYin: &#39;w&#39;, cityPY: &#39;w&#39; }, { cityName: &#39;瓦房店&#39;, cityPinYin: &#39;wafangdian&#39;, cityPY: &#39;wfd&#39; }, { cityName: &#39;万宁&#39;, cityPinYin: &#39;wanning&#39;, cityPY: &#39;wn&#39; }, { cityName: &#39;万源&#39;, cityPinYin: &#39;wanyuan&#39;, cityPY: &#39;wy&#39; }, { cityName: &#39;万州&#39;, cityPinYin: &#39;wanzhou&#39;, cityPY: &#39;wz&#39; }, { cityName: &#39;潍坊&#39;, cityPinYin: &#39;weifang&#39;, cityPY: &#39;wf&#39; }, { cityName: &#39;威海&#39;, cityPinYin: &#39;weihai&#39;, cityPY: &#39;wh&#39; }, { cityName: &#39;渭南&#39;, cityPinYin: &#39;weinan&#39;, cityPY: &#39;wn&#39; }, { cityName: &#39;文昌&#39;, cityPinYin: &#39;wenchang&#39;, cityPY: &#39;wc&#39; }, { cityName: &#39;温岭&#39;, cityPinYin: &#39;wenling&#39;, cityPY: &#39;wl&#39; }, { cityName: &#39;温州&#39;, cityPinYin: &#39;wenzhou&#39;, cityPY: &#39;wz&#39; }, { cityName: &#39;乌海&#39;, cityPinYin: &#39;wuhai&#39;, cityPY: &#39;wh&#39; }, { cityName: &#39;武汉&#39;, cityPinYin: &#39;wuhan&#39;, cityPY: &#39;wh&#39; }, { cityName: &#39;芜湖&#39;, cityPinYin: &#39;wuhu&#39;, cityPY: &#39;wh&#39; }, { cityName: &#39;乌兰浩特&#39;, cityPinYin: &#39;wulanhaote&#39;, cityPY: &#39;wlht&#39; }, { cityName: &#39;武隆&#39;, cityPinYin: &#39;wulong&#39;, cityPY: &#39;wl&#39; }, { cityName: &#39;乌鲁木齐&#39;, cityPinYin: &#39;wulumuqi&#39;, cityPY: &#39;wlmq&#39; }, { cityName: &#39;武清&#39;, cityPinYin: &#39;wuqing&#39;, cityPY: &#39;wq&#39; }, { cityName: &#39;武威&#39;, cityPinYin: &#39;wuwei&#39;, cityPY: &#39;ww&#39; }, { cityName: &#39;无锡&#39;, cityPinYin: &#39;wuxi&#39;, cityPY: &#39;wx&#39; }, { cityName: &#39;武夷山&#39;, cityPinYin: &#39;wuyishan&#39;, cityPY: &#39;wys&#39; }, { cityName: &#39;婺源&#39;, cityPinYin: &#39;wuyuan&#39;, cityPY: &#39;wy&#39; }, { cityName: &#39;X&#39;, cityPinYin: &#39;x&#39;, cityPY: &#39;x&#39; }, { cityName: &#39;西安&#39;, cityPinYin: &#39;xian&#39;, cityPY: &#39;xa&#39; }, { cityName: &#39;襄阳&#39;, cityPinYin: &#39;xiangyang&#39;, cityPY: &#39;xy&#39; }, { cityName: &#39;咸宁&#39;, cityPinYin: &#39;xianning&#39;, cityPY: &#39;xn&#39; }, { cityName: &#39;孝感&#39;, cityPinYin: &#39;xiaogan&#39;, cityPY: &#39;xg&#39; }, { cityName: &#39;霞浦&#39;, cityPinYin: &#39;xiapu&#39;, cityPY: &#39;xp&#39; }, { cityName: &#39;西昌&#39;, cityPinYin: &#39;xichang&#39;, cityPY: &#39;xc&#39; }, { cityName: &#39;锡林浩特&#39;, cityPinYin: &#39;xilinhaote&#39;, cityPY: &#39;xlht&#39; }, { cityName: &#39;邢台&#39;, cityPinYin: &#39;xingtai&#39;, cityPY: &#39;xt&#39; }, { cityName: &#39;西宁&#39;, cityPinYin: &#39;xining&#39;, cityPY: &#39;xn&#39; }, { cityName: &#39;新乡&#39;, cityPinYin: &#39;xinxiang&#39;, cityPY: &#39;xx&#39; }, { cityName: &#39;信阳&#39;, cityPinYin: &#39;xinyang&#39;, cityPY: &#39;xy&#39; }, { cityName: &#39;新余&#39;, cityPinYin: &#39;xinyu&#39;, cityPY: &#39;xy&#39; }, { cityName: &#39;忻州&#39;, cityPinYin: &#39;xinzhou&#39;, cityPY: &#39;xz&#39; }, { cityName: &#39;许昌&#39;, cityPinYin: &#39;xuchang&#39;, cityPY: &#39;xc&#39; }, { cityName: &#39;徐州&#39;, cityPinYin: &#39;xuzhou&#39;, cityPY: &#39;xz&#39; }, { cityName: &#39;Y&#39;, cityPinYin: &#39;y&#39;, cityPY: &#39;y&#39; }, { cityName: &#39;延安&#39;, cityPinYin: &#39;yanan&#39;, cityPY: &#39;ya&#39; }, { cityName: &#39;盐城&#39;, cityPinYin: &#39;yancheng&#39;, cityPY: &#39;yc&#39; }, { cityName: &#39;阳泉&#39;, cityPinYin: &#39;yangquan&#39;, cityPY: &#39;yq&#39; }, { cityName: &#39;扬州&#39;, cityPinYin: &#39;yangzhou&#39;, cityPY: &#39;yz&#39; }, { cityName: &#39;延吉&#39;, cityPinYin: &#39;yanji&#39;, cityPY: &#39;yj&#39; }, { cityName: &#39;烟台&#39;, cityPinYin: &#39;yantai&#39;, cityPY: &#39;yt&#39; }, { cityName: &#39;宜宾&#39;, cityPinYin: &#39;yibin&#39;, cityPY: &#39;yb&#39; }, { cityName: &#39;宜昌&#39;, cityPinYin: &#39;yichang&#39;, cityPY: &#39;yc&#39; }, { cityName: &#39;宜春&#39;, cityPinYin: &#39;yichun&#39;, cityPY: &#39;yc&#39; }, { cityName: &#39;银川&#39;, cityPinYin: &#39;yinchuan&#39;, cityPY: &#39;yc&#39; }, { cityName: &#39;英德&#39;, cityPinYin: &#39;yingde&#39;, cityPY: &#39;yd&#39; }, { cityName: &#39;营口&#39;, cityPinYin: &#39;yingkou&#39;, cityPY: &#39;yk&#39; }, { cityName: &#39;营山&#39;, cityPinYin: &#39;yingshan&#39;, cityPY: &#39;ys&#39; }, { cityName: &#39;鹰潭&#39;, cityPinYin: &#39;yingtan&#39;, cityPY: &#39;yt&#39; }, { cityName: &#39;义乌&#39;, cityPinYin: &#39;yiwu&#39;, cityPY: &#39;yw&#39; }, { cityName: &#39;宜兴&#39;, cityPinYin: &#39;yixing&#39;, cityPY: &#39;yx&#39; }, { cityName: &#39;益阳&#39;, cityPinYin: &#39;yiyang&#39;, cityPY: &#39;yy&#39; }, { cityName: &#39;永嘉&#39;, cityPinYin: &#39;yongjia&#39;, cityPY: &#39;yj&#39; }, { cityName: &#39;永州&#39;, cityPinYin: &#39;yongzhou&#39;, cityPY: &#39;yz&#39; }, { cityName: &#39;尤溪&#39;, cityPinYin: &#39;youxi&#39;, cityPY: &#39;yx&#39; }, { cityName: &#39;岳阳&#39;, cityPinYin: &#39;yueyang&#39;, cityPY: &#39;yy&#39; }, { cityName: &#39;余杭&#39;, cityPinYin: &#39;yuhang&#39;, cityPY: &#39;yh&#39; }, { cityName: &#39;榆林&#39;, cityPinYin: &#39;yulin&#39;, cityPY: &#39;yl&#39; }, { cityName: &#39;运城&#39;, cityPinYin: &#39;yuncheng&#39;, cityPY: &#39;yc&#39; }, { cityName: &#39;余姚&#39;, cityPinYin: &#39;yuyao&#39;, cityPY: &#39;yy&#39; }, { cityName: &#39;Z&#39;, cityPinYin: &#39;z&#39;, cityPY: &#39;z&#39; }, { cityName: &#39;枣阳&#39;, cityPinYin: &#39;zaoyang&#39;, cityPY: &#39;zy&#39; }, { cityName: &#39;枣庄&#39;, cityPinYin: &#39;zaozhuang&#39;, cityPY: &#39;zz&#39; }, { cityName: &#39;长春&#39;, cityPinYin: &#39;zhangchun&#39;, cityPY: &#39;zc&#39; }, { cityName: &#39;张家界&#39;, cityPinYin: &#39;zhangjiajie&#39;, cityPY: &#39;zjj&#39; }, { cityName: &#39;张家口&#39;, cityPinYin: &#39;zhangjiakou&#39;, cityPY: &#39;zjk&#39; }, { cityName: &#39;章丘&#39;, cityPinYin: &#39;zhangqiu&#39;, cityPY: &#39;zq&#39; }, { cityName: &#39;长沙&#39;, cityPinYin: &#39;zhangsha&#39;, cityPY: &#39;zs&#39; }, { cityName: &#39;张掖&#39;, cityPinYin: &#39;zhangye&#39;, cityPY: &#39;zy&#39; }, { cityName: &#39;长治&#39;, cityPinYin: &#39;zhangzhi&#39;, cityPY: &#39;zz&#39; }, { cityName: &#39;漳州&#39;, cityPinYin: &#39;zhangzhou&#39;, cityPY: &#39;zz&#39; }, { cityName: &#39;湛江&#39;, cityPinYin: &#39;zhanjiang&#39;, cityPY: &#39;zj&#39; }, { cityName: &#39;昭通&#39;, cityPinYin: &#39;zhaotong&#39;, cityPY: &#39;zt&#39; }, { cityName: &#39;郑州&#39;, cityPinYin: &#39;zhengzhou&#39;, cityPY: &#39;zz&#39; }, { cityName: &#39;镇江&#39;, cityPinYin: &#39;zhenjiang&#39;, cityPY: &#39;zj&#39; }, { cityName: &#39;镇远&#39;, cityPinYin: &#39;zhenyuan&#39;, cityPY: &#39;zy&#39; }, { cityName: &#39;织金&#39;, cityPinYin: &#39;zhijin&#39;, cityPY: &#39;zj&#39; }, { cityName: &#39;重庆&#39;, cityPinYin: &#39;zhongqing&#39;, cityPY: &#39;zq&#39; }, { cityName: &#39;中山&#39;, cityPinYin: &#39;zhongshan&#39;, cityPY: &#39;zs&#39; }, { cityName: &#39;中卫&#39;, cityPinYin: &#39;zhongwei&#39;, cityPY: &#39;zw&#39; }, { cityName: &#39;钟祥&#39;, cityPinYin: &#39;zhongxiang&#39;, cityPY: &#39;zx&#39; }, { cityName: &#39;周口&#39;, cityPinYin: &#39;zhoukou&#39;, cityPY: &#39;zk&#39; }, { cityName: &#39;珠海&#39;, cityPinYin: &#39;zhuhai&#39;, cityPY: &#39;zh&#39; }, { cityName: &#39;诸暨&#39;, cityPinYin: &#39;zhuji&#39;, cityPY: &#39;zj&#39; }, { cityName: &#39;驻马店&#39;, cityPinYin: &#39;zhumadian&#39;, cityPY: &#39;zmd&#39; }, { cityName: &#39;株洲&#39;, cityPinYin: &#39;zhuzhou&#39;, cityPY: &#39;zz&#39; }, { cityName: &#39;淄博&#39;, cityPinYin: &#39;zibo&#39;, cityPY: &#39;zb&#39; }, { cityName: &#39;遵义&#39;, cityPinYin: &#39;zunyi&#39;, cityPY: &#39;zy&#39; }]
 }
})

citys.wxss

.a-z{
 width: 35rpx;
 position: fixed;
 top: 112rpx;
 text-align: center;
 right: 5rpx;
 color: #3399CC;
 font-size: 30rpx;
 /* border: 1rpx solid #3399CC; */
}


.city-item-content {
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin-top: 110rpx;
 background-color: #FFFFFF;
}

.city-item {
 background: #fff;
 /* margin-top: 5rpx; */
 width: 80%; 
 padding-left: 5%;
 margin-left: 5%;
 height: 90rpx;
 font-size: 45rpx;
 line-height: 100rpx;
 border-bottom: 1rpx solid #CCCCCC; 
 /* border:1rpx solid red; */
}

.city-item-A-Z{
 width: 100%;
 height: 40rpx;
 font-size: 30rpx;
 padding-left: 10%;
 background-color: #EEEEEE;
 border-top: 1rpx solid #CCCCCC; 
 margin-top: -1rpx;
}


.search-box {
 top: 0;
 position: fixed;
 width: 100%;
 /* left:5%; */
 background: #eee;
 height: 110rpx;
 font-size: 30rpx;
 border-bottom:1rpx solid #DDDDDD; 
 /* border: 1rpx solid red; */
}

.search-input {
 height: 70rpx;
 line-height: 60rpx;
 width: 80%;
 margin-left: 7.5%;
 border-radius: 20rpx;
 /* border: 1rpx solid red; */
 background: #fff;
 margin-top: 20rpx;
 padding-left: 5%;
}

.search-input-placeholder {
 text-align: center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序 向左滑动删除功能的实现

微信小程序 监听手势滑动切换页面的实现

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

Atas ialah kandungan terperinci 微信小程序实现城市列表的选择. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!