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

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

实现效果预览

 

实现功能简介

• 城市的选择
• 按中文/拼音/首字母条件搜索
• 按首字字母快速定位到城市位置
  

目录结构

主要代码

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='warning-top'>测试消息消息这是测试消息啊啊啊</view>
<form bindsubmit="formsubmit" bindreset="formreset" class='form-content'>
 <view class='flex-box' data-id='出发城市'>
 <view class='flex-box-header'>出发城市</view>
 <view class="flex-box-content">
 <input name='begincity' value='{{begin}}' disabled='disabled' placeholder="" bindtap='bindbegincityview' class='input-city'/>
 </view>
 </view>

 <view class="flex-box" data-id='目的城市'>
 <view class='flex-box-header'>目的城市</view>
 <view class="flex-box-content">
 <input name='endcity' value='{{end}}' placeholder="" disabled='disabled' bindtap='bindendcityview' class='input-city'/>
 </view>
 </view>

 <view class="flex-box">
 <view class='flex-box-header'>出发日期</view>
 <picker mode="date" name='leavedate' class='flex-box-content-pricker' value="{{date}}" start="2018-01-01" end="2019-09-01" bindchange="binddatechange" >
 <view class='input-city'>{{date}}</view>
 </picker>
 </view>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。