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

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

实现效果预览

实现功能简介

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

目录结构

主要代码

app.js

rush:js;"> App({ globalData: { trainBeginCity: '杭州',trainEndCity: '北京' } })

app.json

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

index.wxml

rush:xml;"> 测试消息消息这是测试消息啊啊啊

index.js

rush: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

rush:css;"> .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

rush:xml;"> Box"> {{item.cityName}} {{item.cityName}} {{item.cityName}}

citys.js

rush: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: '北京',{ cityName: '广州',{ cityName: '深圳',{ cityName: '杭州',{ 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',{ 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' },cityPinYin: 'beijing',{ 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',{ cityName: '巢湖',cityPinYin: 'chaohu',cityPY: 'ch' },{ cityName: '潮州',cityPinYin: 'chaozhou',{ cityName: '承德',cityPinYin: 'chengde',{ cityName: '成都',cityPinYin: 'chengdou',{ cityName: '郴州',cityPinYin: 'chenzhou',{ cityName: '赤壁',cityPinYin: 'chibi',cityPY: 'cb' },{ cityName: '赤峰',cityPinYin: 'chifeng',cityPY: 'cf' },{ cityName: '滁州',cityPinYin: 'chuzhou',{ cityName: 'D',cityPinYin: 'd',cityPY: 'd' },{ cityName: '大理',cityPinYin: 'dali',cityPY: 'dl' },{ cityName: '大连',cityPinYin: 'dalian',{ 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',{ cityName: '德阳',cityPinYin: 'deyang',cityPY: 'dy' },{ cityName: '德州',cityPinYin: 'dezhou',{ cityName: '定远',cityPinYin: 'dingyuan',{ cityName: '东莞',cityPinYin: 'dongguan',cityPY: 'dg' },{ cityName: '东海县',cityPinYin: 'donghaixian',cityPY: 'dhx' },{ cityName: '东胜',cityPinYin: 'dongsheng',cityPY: 'ds' },{ cityName: '东营',cityPinYin: 'dongying',{ 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',{ cityName: '阜新',cityPinYin: 'fuxin',cityPY: 'fx' },{ cityName: '阜阳',cityPinYin: 'fuyang',cityPY: 'fy' },{ cityName: '抚州',cityPinYin: 'fuzhou',cityPY: 'fz' },{ cityName: '福州',{ 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' },cityPinYin: 'guangzhou',{ cityName: '桂林',cityPinYin: 'guilin',cityPY: 'gl' },{ cityName: '贵阳',cityPinYin: 'guiyang',{ 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' },cityPinYin: 'hangzhou',cityPY: 'hz' },{ cityName: '涵江',cityPinYin: 'hanjiang',cityPY: 'hj' },{ cityName: '汉中',cityPinYin: 'hanzhong',{ cityName: '鹤壁',cityPinYin: 'hebi',cityPY: 'hb' },{ cityName: '合川',cityPinYin: 'hechuan',{ cityName: '合肥',cityPinYin: 'hefei',cityPY: 'hf' },{ cityName: '鹤岗',cityPinYin: 'hegang',cityPY: 'hg' },{ cityName: '黑河',cityPinYin: 'heihe',cityPY: 'hh' },{ cityName: '衡山',cityPinYin: 'hengshan',cityPY: 'hs' },{ cityName: '衡水',cityPinYin: 'hengshui',{ cityName: '衡阳',cityPinYin: 'hengyang',cityPY: 'hy' },{ cityName: '菏泽',cityPinYin: 'heze',{ cityName: '淮安',cityPinYin: 'huaian',cityPY: 'ha' },{ cityName: '淮北',cityPinYin: 'huaibei',{ cityName: '怀化',cityPinYin: 'huaihua',{ cityName: '淮南',cityPinYin: 'huainan',{ cityName: '黄山',cityPinYin: 'huangshan',{ cityName: '黄石',cityPinYin: 'huangshi',{ cityName: '呼和浩特',cityPinYin: 'huhehaote',cityPY: 'hhht' },{ cityName: '惠州',cityPinYin: 'huizhou',{ cityName: '葫芦岛',cityPinYin: 'huludao',cityPY: 'hld' },{ cityName: '湖州',cityPinYin: 'huzhou',{ 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',{ 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',{ cityName: '荆州',cityPinYin: 'jingzhou',{ cityName: '金华',cityPinYin: 'jinhua',cityPY: 'jh' },{ cityName: '集宁',cityPinYin: 'jining',{ cityName: '济宁',{ cityName: '晋江',cityPinYin: 'jinjiang',cityPY: 'jj' },{ cityName: '锦州',cityPinYin: 'jinzhou',{ cityName: '吉首',cityPinYin: 'jishou',{ cityName: '九江',cityPinYin: 'jiujiang',{ cityName: '酒泉',cityPinYin: 'jiuquan',cityPY: 'jq' },{ cityName: '鸡西',cityPinYin: 'jixi',{ 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',{ 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',{ cityName: '辽源',cityPinYin: 'liaoyuan',{ cityName: '丽江',cityPinYin: 'lijiang',{ cityName: '临汾',cityPinYin: 'linfen',{ cityName: '陵水',cityPinYin: 'lingshui',{ cityName: '临海',cityPinYin: 'linhai',cityPY: 'lh' },{ cityName: '临河',cityPinYin: 'linhe',{ cityName: '临沂',cityPinYin: 'linyi',{ cityName: '六安',cityPinYin: 'liuan',cityPY: 'la' },{ cityName: '六盘水',cityPinYin: 'liupanshui',cityPY: 'lps' },{ cityName: '柳州',cityPinYin: 'liuzhou',{ cityName: '溧阳',cityPinYin: 'liyang',{ cityName: '龙岩',cityPinYin: 'longyan',{ cityName: '龙游',cityPinYin: 'longyou',{ cityName: '娄底',cityPinYin: 'loudi',cityPY: 'ld' },{ cityName: '吕梁',cityPinYin: 'lu:liang',cityPY: 'll' },{ cityName: '漯河',cityPinYin: 'luohe',{ cityName: '洛阳',cityPinYin: 'luoyang',{ cityName: '罗源',cityPinYin: 'luoyuan',{ cityName: '庐山',cityPinYin: 'lushan',{ 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',{ cityName: '漠河',cityPinYin: 'mohe',cityPY: 'mh' },{ cityName: '牡丹江',cityPinYin: 'mudanjiang',cityPY: 'mdj' },{ cityName: 'N',cityPinYin: 'n',cityPY: 'n' },{ cityName: '南昌',cityPinYin: 'nanchang',cityPY: 'nc' },{ cityName: '南城',cityPinYin: 'nancheng',{ cityName: '南充',cityPinYin: 'nanchong',{ 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',{ 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: '潜江',{ 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',{ cityName: '渠县',cityPinYin: 'quxian',cityPY: 'qx' },{ cityName: '衢州',cityPinYin: 'quzhou',{ 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',{ cityName: '三明',cityPinYin: 'sanming',cityPY: 'sm' },{ cityName: '三亚',cityPinYin: 'sanya',cityPY: 'sy' },{ cityName: '厦门',cityPinYin: 'shamen',cityPinYin: 'shanghai',cityPY: 'sh' },{ cityName: '商丘',cityPinYin: 'shangqiu',cityPY: 'sq' },{ cityName: '上饶',cityPinYin: 'shangrao',cityPY: 'sr' },{ cityName: '上虞',cityPinYin: 'shangyu',{ cityName: '山海关',cityPinYin: 'shanhaiguan',cityPY: 'shg' },{ cityName: '汕头',cityPinYin: 'shantou',cityPY: 'st' },{ cityName: '韶关',cityPinYin: 'shaoguan',cityPY: 'sg' },{ cityName: '绍兴',cityPinYin: 'shaoxing',cityPY: 'sx' },{ cityName: '邵阳',cityPinYin: 'shaoyang',{ cityName: '神木',cityPinYin: 'shenmu',{ cityName: '沈阳',cityPinYin: 'shenyang',cityPinYin: 'shenzhen',cityPY: 'sz' },{ cityName: '石家庄',cityPinYin: 'shijiazhuang',cityPY: 'sjz' },{ cityName: '十堰',cityPinYin: 'shiyan',{ cityName: '双鸭山',cityPinYin: 'shuangyashan',cityPY: 'sys' },{ cityName: '四平',cityPinYin: 'siping',cityPY: 'sp' },{ cityName: '松江',cityPinYin: 'songjiang',cityPY: 'sj' },{ cityName: '松原',cityPinYin: 'songyuan',{ cityName: '松滋',cityPinYin: 'songzi',{ cityName: '绥德',cityPinYin: 'suide',cityPY: 'sd' },{ cityName: '绥芬河',cityPinYin: 'suifenhe',cityPY: 'sfh' },{ cityName: '遂宁',cityPinYin: 'suining',cityPY: 'sn' },{ cityName: '随州',cityPinYin: 'suizhou',{ cityName: '苏州',cityPinYin: 'suzhou',{ cityName: '宿州',{ cityName: 'T',cityPinYin: 't',cityPY: 't' },{ cityName: '泰安',cityPinYin: 'taian',cityPY: 'ta' },{ cityName: '台安',{ cityName: '泰宁',cityPinYin: 'taining',cityPY: 'tn' },{ cityName: '太原',cityPinYin: 'taiyuan',cityPY: 'ty' },{ cityName: '台州',cityPinYin: 'taizhou',cityPY: 'tz' },{ cityName: '泰州',{ cityName: '唐山',cityPinYin: 'tangshan',cityPY: 'ts' },{ cityName: '滕州',cityPinYin: 'tengzhou',{ cityName: '天津',cityPinYin: 'tianjin',cityPY: 'tj' },{ cityName: '天门',cityPinYin: 'tianmen',cityPY: 'tm' },{ cityName: '天水',cityPinYin: 'tianshui',{ cityName: '铁岭',cityPinYin: 'tieling',cityPY: 'tl' },{ cityName: '桐城',cityPinYin: 'tongcheng',cityPY: 'tc' },{ cityName: '通化',cityPinYin: 'tonghua',cityPY: 'th' },{ cityName: '通辽',cityPinYin: 'tongliao',{ cityName: '铜陵',cityPinYin: 'tongling',{ 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',{ cityName: '文昌',cityPinYin: 'wenchang',cityPY: 'wc' },{ cityName: '温岭',cityPinYin: 'wenling',cityPY: 'wl' },{ cityName: '温州',cityPinYin: 'wenzhou',{ cityName: '乌海',cityPinYin: 'wuhai',{ cityName: '武汉',cityPinYin: 'wuhan',{ cityName: '芜湖',cityPinYin: 'wuhu',{ cityName: '乌兰浩特',cityPinYin: 'wulanhaote',cityPY: 'wlht' },{ cityName: '武隆',cityPinYin: 'wulong',{ cityName: '乌鲁木齐',cityPinYin: 'wulumuqi',cityPY: 'wlmq' },{ cityName: '武清',cityPinYin: 'wuqing',cityPY: 'wq' },{ cityName: '武威',cityPinYin: 'wuwei',cityPY: 'ww' },{ cityName: '无锡',cityPinYin: 'wuxi',cityPY: 'wx' },{ cityName: '武夷山',cityPinYin: 'wuyishan',cityPY: 'wys' },{ cityName: '婺源',cityPinYin: 'wuyuan',{ 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',{ cityName: '新乡',cityPinYin: 'xinxiang',cityPY: 'xx' },{ cityName: '信阳',cityPinYin: 'xinyang',{ cityName: '新余',cityPinYin: 'xinyu',{ cityName: '忻州',cityPinYin: 'xinzhou',cityPY: 'xz' },{ cityName: '许昌',cityPinYin: 'xuchang',{ cityName: '徐州',cityPinYin: 'xuzhou',{ 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',{ cityName: '宜春',cityPinYin: 'yichun',{ cityName: '银川',cityPinYin: 'yinchuan',{ cityName: '英德',cityPinYin: 'yingde',cityPY: 'yd' },{ cityName: '营口',cityPinYin: 'yingkou',cityPY: 'yk' },{ cityName: '营山',cityPinYin: 'yingshan',cityPY: 'ys' },{ cityName: '鹰潭',cityPinYin: 'yingtan',{ cityName: '义乌',cityPinYin: 'yiwu',cityPY: 'yw' },{ cityName: '宜兴',cityPinYin: 'yixing',cityPY: 'yx' },{ cityName: '益阳',cityPinYin: 'yiyang',cityPY: 'yy' },{ cityName: '永嘉',cityPinYin: 'yongjia',{ cityName: '永州',cityPinYin: 'yongzhou',{ cityName: '尤溪',cityPinYin: 'youxi',{ cityName: '岳阳',cityPinYin: 'yueyang',{ cityName: '余杭',cityPinYin: 'yuhang',cityPY: 'yh' },{ cityName: '榆林',cityPinYin: 'yulin',cityPY: 'yl' },{ cityName: '运城',cityPinYin: 'yuncheng',{ cityName: '余姚',cityPinYin: 'yuyao',{ 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',{ cityName: '长治',cityPinYin: 'zhangzhi',{ cityName: '漳州',cityPinYin: 'zhangzhou',{ cityName: '湛江',cityPinYin: 'zhanjiang',cityPY: 'zj' },{ cityName: '昭通',cityPinYin: 'zhaotong',cityPY: 'zt' },{ cityName: '郑州',cityPinYin: 'zhengzhou',{ cityName: '镇江',cityPinYin: 'zhenjiang',{ cityName: '镇远',cityPinYin: 'zhenyuan',{ cityName: '织金',cityPinYin: 'zhijin',{ cityName: '重庆',cityPinYin: 'zhongqing',{ cityName: '中山',cityPinYin: 'zhongshan',{ cityName: '中卫',cityPinYin: 'zhongwei',cityPY: 'zw' },{ cityName: '钟祥',cityPinYin: 'zhongxiang',cityPY: 'zx' },{ cityName: '周口',cityPinYin: 'zhoukou',cityPY: 'zk' },{ cityName: '珠海',cityPinYin: 'zhuhai',cityPY: 'zh' },{ cityName: '诸暨',cityPinYin: 'zhuji',{ cityName: '驻马店',cityPinYin: 'zhumadian',cityPY: 'zmd' },{ cityName: '株洲',cityPinYin: 'zhuzhou',{ cityName: '淄博',cityPinYin: 'zibo',cityPY: 'zb' },{ cityName: '遵义',cityPinYin: 'zunyi',cityPY: 'zy' }]
}
})

citys.wxss

rush:css;"> .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;
}

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

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

实现功能简介

目录结构

主要代码

相关推荐