小程序前端城市地址
图1
1.新建个文件夹姑且命名为adderss
<!--地址页封装 adderss/index.wxml-->
<view>
<view class="search_v">
<view class="search fl">
<input placeholder="中文/拼音/首字母" class='test1' bindinput='bindSarchInput' placeholder-class='search-input-placeholder' />
</view>
</view>
<view class='a-z'>
<view wx:for="{{cityAZ}}" wx:key="key">
<view data-name='{{item.cityName}}' bindtap='bindAZ'>{{item.cityName}}</view>
</view>
</view>
<view class='city-item-content'>
<view style="margin: 0 30rpx;">
<view wx:for="{{cityResults}}" wx:key="key" class="{{item.cityPinYin.length > 1 ? 'CS':''}}">
<view wx:if="{{item.cityPinYin.length > 1}}" class='city-item' data-cityname='{{item.cityName}}' data-province='{{item.province}}' bindtap='citySelected'>{{item.cityName}}</view>
<view wx:else class='city-item-A-Z' data-cityname='{{item.cityName}}'>{{item.cityName}}</view>
</view>
</view>
</view>
</view>
2.再建一个js文件放所有城市地址姑且命名为：citys.js
// 我们需要所有的城市
const citys =[
{ cityName: "热门城市", cityPinYin: '', cityPY: '' },
{ cityName: '上海', cityPinYin: '##', cityPY: '##',province:'上海' },
{ cityName: '北京', cityPinYin: '##', cityPY: '##',province:'北京' },
{ cityName: '广州', cityPinYin: '##', cityPY: '##',province:'广东' },
{ cityName: '深圳', cityPinYin: '##', cityPY: '##',province:'广东' },
{ cityName: '杭州', cityPinYin: '##', cityPY: '##',province:'浙江' },
{ cityName: 'A', cityPinYin: 'a', cityPY: 'a' },
{ cityName: '阿克苏', cityPinYin: 'akesu', cityPY: 'aks',province:'新疆维吾尔自治区' },
{ cityName: '安康', cityPinYin: 'ankang', cityPY: 'ak',province:'陕西 ' },
{ cityName: '安陆', cityPinYin: 'anlu', cityPY: 'al',province:'陕西 ' },
{ cityName: '安庆', cityPinYin: 'anqing', cityPY: 'aq',province:'安徽 ' },
{ cityName: '鞍山', cityPinYin: 'anshan', cityPY: 'as',province:'辽宁 ' },
{ cityName: '安顺', cityPinYin: 'anshun', cityPY: 'as',province:'贵州 ' },
{ cityName: '安阳', cityPinYin: 'anyang', cityPY: 'ay',province:'河南 ' },
{ cityName: 'B', cityPinYin: 'b', cityPY: 'b' },
{ cityName: '白城', cityPinYin: 'baicheng', cityPY: 'bc',province:'吉林 ' },
{ cityName: '蚌埠', cityPinYin: 'bangbu', cityPY: 'bb',province:'安徽 ' },
{ cityName: '保定', cityPinYin: 'baoding', cityPY: 'bd',province:'河北 ' },
{ cityName: '宝鸡', cityPinYin: 'baoji', cityPY: 'bj',province:'陕西 ' },
{ cityName: '包头', cityPinYin: 'baotou', cityPY: 'bt',province:'内蒙古自治区' },
{ cityName: '鲅鱼圈', cityPinYin: 'bayuquan', cityPY: 'byq',province:'辽宁 ' },
{ cityName: '巴中', cityPinYin: 'bazhong', cityPY: 'bz',province:'四川 ' },
{ cityName: '北戴河', cityPinYin: 'beidaihe', cityPY: 'bdh',province:'河北 ' },
{ cityName: '北海', cityPinYin: 'beihai', cityPY: 'bh',province:'广西壮族' },
{ cityName: '北京', cityPinYin: 'beijing', cityPY: 'bj',province:'北京' },
{ cityName: '博乐', cityPinYin: 'bole', cityPY: 'bl',province:'新疆' },
{ cityName: 'C', cityPinYin: 'c', cityPY: 'c' },
{ cityName: '苍南', cityPinYin: 'cangnan', cityPY: 'cn',province:'浙江 ' },
{ cityName: '沧州', cityPinYin: 'cangzhou', cityPY: 'cz',province:'河北 ' },
{ cityName: '常德', cityPinYin: 'changde', cityPY: 'cd',province:'湖南 ' },
{ cityName: '常州', cityPinYin: 'changzhou', cityPY: 'cz',province:'江苏 ' },
{ cityName: '巢湖', cityPinYin: 'chaohu', cityPY: 'ch',province:'安徽 ' },
{ cityName: '潮州', cityPinYin: 'chaozhou', cityPY: 'cz',province:'广东 ' },
{ cityName: '承德', cityPinYin: 'chengde', cityPY: 'cd',province:'河北 ' },
{ cityName: '成都', cityPinYin: 'chengdou', cityPY: 'cd',province:'四川 ' },
{ cityName: '郴州', cityPinYin: 'chenzhou', cityPY: 'cz',province:'湖南 ' },
{ cityName: '赤壁', cityPinYin: 'chibi', cityPY: 'cb',province:'广东 ' },
{ cityName: '赤峰', cityPinYin: 'chifeng', cityPY: 'cf',province:'内蒙古自治区' },
{ cityName: '滁州', cityPinYin: 'chuzhou', cityPY: 'cz',province:'安徽 ' },
{ cityName: 'D', cityPinYin: 'd', cityPY: 'd' },
{ cityName: '大理', cityPinYin: 'dali', cityPY: 'dl',province:'云南 ' },
{ cityName: '大连', cityPinYin: 'dalian', cityPY: 'dl',province:'辽宁 ' },
{ cityName: '丹东', cityPinYin: 'dandong', cityPY: 'dd',province:'辽宁 ' },
{ cityName: '大庆', cityPinYin: 'daqing', cityPY: 'dq',province:'黑龙江 ' },
{ cityName: '大同', cityPinYin: 'datong', cityPY: 'dt',province:'山西 ' },
{ cityName: '达州', cityPinYin: 'dazhou', cityPY: 'dz',province:'四川 ' },
{ cityName: '德令哈', cityPinYin: 'delingha', cityPY: 'dlh',province:'青海 ' },
{ cityName: '德清', cityPinYin: 'deqing', cityPY: 'dq',province:'浙江 ' },
{ cityName: '德阳', cityPinYin: 'deyang', cityPY: 'dy',province:'四川 ' },
{ cityName: '德州', cityPinYin: 'dezhou', cityPY: 'dz',province:'山东 ' },
{ cityName: '定远', cityPinYin: 'dingyuan', cityPY: 'dy',province:'安徽 ' },
{ cityName: '东莞', cityPinYin: 'dongguan', cityPY: 'dg',province:'广东 ' },
{ cityName: '东海县', cityPinYin: 'donghaixian', cityPY: 'dhx',province:'江苏 ' },
{ cityName: '东胜', cityPinYin: 'dongsheng', cityPY: 'ds',province:'内蒙古自治区' },
{ cityName: '东营', cityPinYin: 'dongying', cityPY: 'dy',province:'山东 ' },
{ cityName: '都江堰', cityPinYin: 'doujiangyan', cityPY: 'djy',province:'四川 ' },
{ cityName: '敦煌', cityPinYin: 'dunhuang', cityPY: 'dh',province:'甘肃 ' },
{ cityName: 'E', cityPinYin: 'e', cityPY: 'e' },
{ cityName: '额济纳', cityPinYin: 'ejina', cityPY: 'ejn',province:'内蒙古自治区' },
{ cityName: '峨眉', cityPinYin: 'emei', cityPY: 'em',province:'四川 ' },
{ cityName: '恩施', cityPinYin: 'enshi', cityPY: 'es',province:'湖北 ' },
{ cityName: '鄂州', cityPinYin: 'ezhou', cityPY: 'ez',province:'湖北 ' },
{ cityName: 'F', cityPinYin: 'f', cityPY: 'f' },
{ cityName: '佛山', cityPinYin: 'foshan', cityPY: 'fs',province:'广东 ' },
{ cityName: '福安', cityPinYin: 'fuan', cityPY: 'fa',province:'福建 ' },
{ cityName: '福鼎', cityPinYin: 'fuding', cityPY: 'fd',province:'福建 ' },
{ cityName: '涪陵', cityPinYin: 'fuling', cityPY: 'fl',province:'重庆市' },
{ cityName: '福清', cityPinYin: 'fuqing', cityPY: 'fq',province:'福建 ' },
{ cityName: '抚顺', cityPinYin: 'fushun', cityPY: 'fs',province:'辽宁 ' },
{ cityName: '阜新', cityPinYin: 'fuxin', cityPY: 'fx',province:'辽宁 ' },
{ cityName: '阜阳', cityPinYin: 'fuyang', cityPY: 'fy',province:'安徽 ' },
{ cityName: '抚州', cityPinYin: 'fuzhou', cityPY: 'fz',province:'江西 ' },
{ cityName: '福州', cityPinYin: 'fuzhou', cityPY: 'fz',province:'福建 ' },
{ cityName: 'G', cityPinYin: 'g', cityPY: 'g' },
{ cityName: '赣州', cityPinYin: 'ganzhou', cityPY: 'gz',province:'江西 ' },
{ cityName: '高密', cityPinYin: 'gaomi', cityPY: 'gm',province:'山东 ' },
{ cityName: '格尔木', cityPinYin: 'geermu', cityPY: 'gem',province:'青海 ' },
{ cityName: '广安', cityPinYin: 'guangan', cityPY: 'ga',province:'四川 ' },
{ cityName: '广元', cityPinYin: 'guangyuan', cityPY: 'gy',province:'四川 ' },
{ cityName: '广州', cityPinYin: 'guangzhou', cityPY: 'gz',province:'广东 ' },
{ cityName: '桂林', cityPinYin: 'guilin', cityPY: 'gl',province:'广西壮族' },
{ cityName: '贵阳', cityPinYin: 'guiyang', cityPY: 'gy',province:'贵州 ' },
{ cityName: 'H', cityPinYin: 'h', cityPY: 'h' },
{ cityName: '哈尔滨', cityPinYin: 'haerbin', cityPY: 'heb',province:'黑龙江 ' },
{ cityName: '海城', cityPinYin: 'haicheng', cityPY: 'hc',province:'辽宁 ' },
{ cityName: '海口', cityPinYin: 'haikou', cityPY: 'hk',province:'海南 ' },
{ cityName: '海拉尔', cityPinYin: 'hailaer', cityPY: 'hle',province:'内蒙古自治区' },
{ cityName: '海宁', cityPinYin: 'haining', cityPY: 'hn',province:'浙江 ' },
{ cityName: '哈密', cityPinYin: 'hami', cityPY: 'hm',province:'新疆维吾尔自治区' },
{ cityName: '邯郸', cityPinYin: 'handan', cityPY: 'hd',province:'河北 ' },
{ cityName: '杭州', cityPinYin: 'hangzhou', cityPY: 'hz',province:'浙江 ' },
{ cityName: '涵江', cityPinYin: 'hanjiang', cityPY: 'hj',province:'福建 ' },
{ cityName: '汉中', cityPinYin: 'hanzhong', cityPY: 'hz',province:'陕西 ' },
{ cityName: '鹤壁', cityPinYin: 'hebi', cityPY: 'hb',province:'河南 ' },
{ cityName: '合川', cityPinYin: 'hechuan', cityPY: 'hc',province:'重庆市' },
{ cityName: '合肥', cityPinYin: 'hefei', cityPY: 'hf',province:'安徽 ' },
{ cityName: '鹤岗', cityPinYin: 'hegang', cityPY: 'hg',province:'黑龙江 ' },
{ cityName: '黑河', cityPinYin: 'heihe', cityPY: 'hh',province:'黑龙江 ' },
{ cityName: '衡山', cityPinYin: 'hengshan', cityPY: 'hs',province:'安徽 ' },
{ cityName: '衡水', cityPinYin: 'hengshui', cityPY: 'hs',province:'河北 ' },
{ cityName: '衡阳', cityPinYin: 'hengyang', cityPY: 'hy',province:'湖南 ' },
{ cityName: '菏泽', cityPinYin: 'heze', cityPY: 'hz',province:'山东 ' },
{ cityName: '淮安', cityPinYin: 'huaian', cityPY: 'ha',province:'江苏 ' },
{ cityName: '淮北', cityPinYin: 'huaibei', cityPY: 'hb',province:'安徽 ' },
{ cityName: '怀化', cityPinYin: 'huaihua', cityPY: 'hh',province:'湖南 ' },
{ cityName: '淮南', cityPinYin: 'huainan', cityPY: 'hn',province:'安徽 ' },
{ cityName: '黄山', cityPinYin: 'huangshan', cityPY: 'hs',province:'安徽 ' },
{ cityName: '黄石', cityPinYin: 'huangshi', cityPY: 'hs',province:'湖北 ' },
{ cityName: '呼和浩特', cityPinYin: 'huhehaote', cityPY: 'hhht',province:'内蒙古自治区' },
{ cityName: '惠州', cityPinYin: 'huizhou', cityPY: 'hz',province:'广东 ' },
{ cityName: '葫芦岛', cityPinYin: 'huludao', cityPY: 'hld',province:'辽宁 ' },
{ cityName: '湖州', cityPinYin: 'huzhou', cityPY: 'hz',province:'浙江 ' },
{ cityName: 'J', cityPinYin: 'j', cityPY: 'j' },
{ cityName: '佳木斯', cityPinYin: 'jiamusi', cityPY: 'jms',province:'黑龙江 ' },
{ cityName: '吉安', cityPinYin: 'jian', cityPY: 'ja',province:'江西 ' },
{ cityName: '江门', cityPinYin: 'jiangmen', cityPY: 'jm',province:'广东 ' },
{ cityName: '江山', cityPinYin: 'jiangshan', cityPY: 'js',province:'浙江 ' },
{ cityName: '胶州', cityPinYin: 'jiaozhou', cityPY: 'jz',province:'山东 ' },
{ cityName: '嘉善', cityPinYin: 'jiashan', cityPY: 'js',province:'浙江 ' },
{ cityName: '嘉兴', cityPinYin: 'jiaxing', cityPY: 'jx',province:'浙江 ' },
{ cityName: '嘉峪关', cityPinYin: 'jiayuguan', cityPY: 'jyg',province:'甘肃 ' },
{ cityName: '揭阳', cityPinYin: 'jieyang', cityPY: 'jy',province:'广东 ' },
{ cityName: '吉林', cityPinYin: 'jilin', cityPY: 'jl',province:'吉林 ' },
{ cityName: '济南', cityPinYin: 'jinan', cityPY: 'jn',province:'山东 ' },
{ cityName: '晋城', cityPinYin: 'jincheng', cityPY: 'jc',province:'山西 ' },
{ cityName: '景德镇', cityPinYin: 'jingdezhen', cityPY: 'jdz',province:'江西 ' },
{ cityName: '荆门', cityPinYin: 'jingmen', cityPY: 'jm',province:'湖北 ' },
{ cityName: '荆州', cityPinYin: 'jingzhou', cityPY: 'jz',province:'湖北 ' },
{ cityName: '金华', cityPinYin: 'jinhua', cityPY: 'jh',province:'浙江 ' },
{ cityName: '集宁', cityPinYin: 'jining', cityPY: 'jn',province:'内蒙古自治区' },
{ cityName: '济宁', cityPinYin: 'jining', cityPY: 'jn',province:'山东 ' },
{ cityName: '晋江', cityPinYin: 'jinjiang', cityPY: 'jj',province:'福建 ' },
{ cityName: '锦州', cityPinYin: 'jinzhou', cityPY: 'jz',province:'辽宁 ' },
{ cityName: '吉首', cityPinYin: 'jishou', cityPY: 'js',province:'湖南 ' },
{ cityName: '九江', cityPinYin: 'jiujiang', cityPY: 'jj',province:'江西 ' },
{ cityName: '酒泉', cityPinYin: 'jiuquan', cityPY: 'jq',province:'甘肃 ' },
{ cityName: '鸡西', cityPinYin: 'jixi', cityPY: 'jx',province:'黑龙江 ' },
{ cityName: 'K', cityPinYin: 'k', cityPY: 'k' },
{ cityName: '开封', cityPinYin: 'kaifeng', cityPY: 'kf',province:'河南 ' },
{ cityName: '凯里', cityPinYin: 'kaili', cityPY: 'kl',province:'贵州 ' },
{ cityName: '喀什', cityPinYin: 'kashen', cityPY: 'ks',province:'新疆维吾尔自治区' },
{ cityName: '库尔勒', cityPinYin: 'kuerle', cityPY: 'kel',province:'新疆维吾尔自治区' },
{ cityName: '昆明', cityPinYin: 'kunming', cityPY: 'km',province:'云南 ' },
{ cityName: '昆山', cityPinYin: 'kunshan', cityPY: 'ks',province:'江苏 ' },
{ cityName: 'L', cityPinYin: 'l', cityPY: 'l' },
{ cityName: '廊坊', cityPinYin: 'langfang', cityPY: 'lf',province:'河北 ' },
{ cityName: '兰州', cityPinYin: 'lanzhou', cityPY: 'lz',province:'甘肃 ' },
{ cityName: '拉萨', cityPinYin: 'lasa', cityPY: 'ls',province:'西藏' },
{ cityName: '耒阳', cityPinYin: 'leiyang', cityPY: 'ly',province:'湖南 ' },
{ cityName: '乐山', cityPinYin: 'leshan', cityPY: 'ls',province:'四川 ' },
{ cityName: '乐清', cityPinYin: 'leqing', cityPY: 'lq',province:'浙江 ' },
{ cityName: '梁平', cityPinYin: 'liangping', cityPY: 'lp',province:'重庆市' },
{ cityName: '连江', cityPinYin: 'lianjiang', cityPY: 'lj',province:'福建 ' },
{ cityName: '连云港', cityPinYin: 'lianyungang', cityPY: 'lyg',province:'江苏 ' },
{ cityName: '聊城', cityPinYin: 'liaocheng', cityPY: 'lc',province:'山东 ' },
{ cityName: '辽阳', cityPinYin: 'liaoyang', cityPY: 'ly',province:'辽宁 ' },
{ cityName: '辽源', cityPinYin: 'liaoyuan', cityPY: 'ly',province:'吉林 ' },
{ cityName: '丽江', cityPinYin: 'lijiang', cityPY: 'lj',province:'云南 ' },
{ cityName: '临汾', cityPinYin: 'linfen', cityPY: 'lf',province:'山西 ' },
{ cityName: '陵水', cityPinYin: 'lingshui', cityPY: 'ls',province:'海南 ' },
{ cityName: '临海', cityPinYin: 'linhai', cityPY: 'lh',province:'浙江 ' },
{ cityName: '临河', cityPinYin: 'linhe', cityPY: 'lh',province:'内蒙古自治区' },
{ cityName: '临沂', cityPinYin: 'linyi', cityPY: 'ly',province:'山东 ' },
{ cityName: '六安', cityPinYin: 'liuan', cityPY: 'la',province:'安徽 ' },
{ cityName: '六盘水', cityPinYin: 'liupanshui', cityPY: 'lps',province:'贵州 ' },
{ cityName: '柳州', cityPinYin: 'liuzhou', cityPY: 'lz',province:'广西壮族' },
{ cityName: '溧阳', cityPinYin: 'liyang', cityPY: 'ly',province:'江苏 ' },
{ cityName: '龙岩', cityPinYin: 'longyan', cityPY: 'ly',province:'福建 ' },
{ cityName: '龙游', cityPinYin: 'longyou', cityPY: 'ly',province:'浙江 ' },
{ cityName: '娄底', cityPinYin: 'loudi', cityPY: 'ld',province:'湖南 ' },
{ cityName: '吕梁', cityPinYin: 'lu:liang', cityPY: 'll',province:'山西 ' },
{ cityName: '漯河', cityPinYin: 'luohe', cityPY: 'lh',province:'河南 ' },
{ cityName: '洛阳', cityPinYin: 'luoyang', cityPY: 'ly',province:'河南 ' },
{ cityName: '罗源', cityPinYin: 'luoyuan', cityPY: 'ly',province:'福建 ' },
{ cityName: '庐山', cityPinYin: 'lushan', cityPY: 'ls',province:'江西 ' },
{ cityName: 'M', cityPinYin: 'm', cityPY: 'm' },
{ cityName: '马鞍山', cityPinYin: 'maanshan', cityPY: 'mas',province:'安徽 ' },
{ cityName: '满洲里', cityPinYin: 'manzhouli', cityPY: 'mzl',province:'内蒙古自治区' },
{ cityName: '美兰', cityPinYin: 'meilan', cityPY: 'ml',province:'海南 ' },
{ cityName: '梅州', cityPinYin: 'meizhou', cityPY: 'mz',province:'广东 ' },
{ cityName: '绵阳', cityPinYin: 'mianyang', cityPY: 'my',province:'四川 ' },
{ cityName: '汨罗', cityPinYin: 'miluo', cityPY: 'ml',province:'湖南 ' },
{ cityName: '漠河', cityPinYin: 'mohe', cityPY: 'mh',province:'黑龙江 ' },
{ cityName: '牡丹江', cityPinYin: 'mudanjiang', cityPY: 'mdj',province:'黑龙江 ' },
{ cityName: 'N', cityPinYin: 'n', cityPY: 'n' },
{ cityName: '南昌', cityPinYin: 'nanchang', cityPY: 'nc',province:'江西 ' },
{ cityName: '南城', cityPinYin: 'nancheng', cityPY: 'nc',province:'江西 ' },
{ cityName: '南充', cityPinYin: 'nanchong', cityPY: 'nc',province:'四川 ' },
{ cityName: '南丰', cityPinYin: 'nanfeng', cityPY: 'nf',province:'江西 ' },
{ cityName: '南京', cityPinYin: 'nanjing', cityPY: 'nj',province:'江苏 ' },
{ cityName: '南宁', cityPinYin: 'nanning', cityPY: 'nn',province:'广西壮族' },
{ cityName: '南通', cityPinYin: 'nantong', cityPY: 'nt',province:'江苏 ' },
{ cityName: '南阳', cityPinYin: 'nanyang', cityPY: 'ny',province:'河南 ' },
{ cityName: '内江', cityPinYin: 'neijiang', cityPY: 'nj',province:'四川 ' },
{ cityName: '宁波', cityPinYin: 'ningbo', cityPY: 'nb',province:'浙江 ' },
{ cityName: '宁德', cityPinYin: 'ningde', cityPY: 'nd',province:'福建 ' },
{ cityName: '宁海', cityPinYin: 'ninghai', cityPY: 'nh',province:'浙江 ' },
{ cityName: 'P', cityPinYin: 'p', cityPY: 'p' },
{ cityName: '盘锦', cityPinYin: 'panjin', cityPY: 'pj',province:'辽宁 ' },
{ cityName: '攀枝花', cityPinYin: 'panzhihua', cityPY: 'pzh',province:'四川 ' },
{ cityName: '平顶山', cityPinYin: 'pingdingshan', cityPY: 'pds',province:'河南 ' },
{ cityName: '萍乡', cityPinYin: 'pingxiang', cityPY: 'px',province:'江西 ' },
{ cityName: '平遥', cityPinYin: 'pingyao', cityPY: 'py',province:'山西 ' },
{ cityName: '莆田', cityPinYin: 'putian', cityPY: 'pt',province:'福建 ' },
{ cityName: 'Q', cityPinYin: 'q', cityPY: 'q' },
{ cityName: '迁安', cityPinYin: 'qianan', cityPY: 'qa',province:'河北 ' },
{ cityName: '黔江', cityPinYin: 'qianjiang', cityPY: 'qj',province:'重庆市' },
{ cityName: '潜江', cityPinYin: 'qianjiang', cityPY: 'qj',province:'湖北 ' },
{ cityName: '蕲春', cityPinYin: 'qichun', cityPY: 'qc',province:'湖北 ' },
{ cityName: '青岛', cityPinYin: 'qingdao', cityPY: 'qd',province:'山东 ' },
{ cityName: '清远', cityPinYin: 'qingyuan', cityPY: 'qy',province:'广东 ' },
{ cityName: '青州市', cityPinYin: 'qingzhoushi', cityPY: 'qzs',province:'山东 ' },
{ cityName: '秦皇岛', cityPinYin: 'qinhuangdao', cityPY: 'qhd',province:'河北 ' },
{ cityName: '琼海', cityPinYin: 'qionghai', cityPY: 'qh',province:'海南 ' },
{ cityName: '齐齐哈尔', cityPinYin: 'qiqihaer', cityPY: 'qqhe',province:'黑龙江 ' },
{ cityName: '七台河', cityPinYin: 'qitaihe', cityPY: 'qth',province:'黑龙江 ' },
{ cityName: '泉州', cityPinYin: 'quanzhou', cityPY: 'qz',province:'福建 ' },
{ cityName: '曲阜', cityPinYin: 'qufu', cityPY: 'qf',province:'山东 ' },
{ cityName: '曲靖', cityPinYin: 'qujing', cityPY: 'qj',province:'云南 ' },
{ cityName: '渠县', cityPinYin: 'quxian', cityPY: 'qx',province:'四川 ' },
{ cityName: '衢州', cityPinYin: 'quzhou', cityPY: 'qz',province:'浙江 ' },
{ cityName: 'R', cityPinYin: 'r', cityPY: 'r' },
{ cityName: '日照', cityPinYin: 'rizhao', cityPY: 'rz',province:'山东 ' },
{ cityName: '如皋', cityPinYin: 'rugao', cityPY: 'rg',province:'江苏 ' },
{ cityName: 'S', cityPinYin: 's', cityPY: 's' },
{ cityName: '三门峡', cityPinYin: 'sanmenxia', cityPY: 'smx',province:'河南 ' },
{ cityName: '三明', cityPinYin: 'sanming', cityPY: 'sm',province:'福建 ' },
{ cityName: '三亚', cityPinYin: 'sanya', cityPY: 'sy',province:'海南 ' },
{ cityName: '上海', cityPinYin: 'shanghai', cityPY: 'sh',province:'上海市' },
{ cityName: '商丘', cityPinYin: 'shangqiu', cityPY: 'sq',province:'河南 ' },
{ cityName: '上饶', cityPinYin: 'shangrao', cityPY: 'sr',province:'江西 ' },
{ cityName: '汕头', cityPinYin: 'shantou', cityPY: 'st',province:'广东 ' },
{ cityName: '韶关', cityPinYin: 'shaoguan', cityPY: 'sg',province:'广东 ' },
{ cityName: '绍兴', cityPinYin: 'shaoxing', cityPY: 'sx',province:'浙江 ' },
{ cityName: '邵阳', cityPinYin: 'shaoyang', cityPY: 'sy',province:'湖南 ' },
{ cityName: '沈阳', cityPinYin: 'shenyang', cityPY: 'sy',province:'辽宁 ' },
{ cityName: '深圳', cityPinYin: 'shenzhen', cityPY: 'sz',province:'广东 ' },
{ cityName: '石家庄', cityPinYin: 'shijiazhuang', cityPY: 'sjz',province:'河北 ' },
{ cityName: '十堰', cityPinYin: 'shiyan', cityPY: 'sy',province:'湖北 ' },
{ cityName: '双鸭山', cityPinYin: 'shuangyashan', cityPY: 'sys',province:'黑龙江 ' },
{ cityName: '四平', cityPinYin: 'siping', cityPY: 'sp',province:'吉林 ' },
{ cityName: '松原', cityPinYin: 'songyuan', cityPY: 'sy',province:'吉林 ' },
{ cityName: '遂宁', cityPinYin: 'suining', cityPY: 'sn',province:'四川 ' },
{ cityName: '随州', cityPinYin: 'suizhou', cityPY: 'sz',province:'湖北 ' },
{ cityName: '苏州', cityPinYin: 'suzhou', cityPY: 'sz',province:'江苏 ' },
{ cityName: '宿州', cityPinYin: 'suzhou', cityPY: 'sz',province:'安徽 ' },
{ cityName: 'T', cityPinYin: 't', cityPY: 't' },
{ cityName: '泰安', cityPinYin: 'taian', cityPY: 'ta',province:'山东 ' },
{ cityName: '太原', cityPinYin: 'taiyuan', cityPY: 'ty',province:'山西 ' },
{ cityName: '台州', cityPinYin: 'taizhou', cityPY: 'tz',province:'浙江 ' },
{ cityName: '泰州', cityPinYin: 'taizhou', cityPY: 'tz',province:'江苏 ' },
{ cityName: '唐山', cityPinYin: 'tangshan', cityPY: 'ts',province:'河北 ' },
{ cityName: '天津', cityPinYin: 'tianjin', cityPY: 'tj',province:'天津 ' },
{ cityName: '天水', cityPinYin: 'tianshui', cityPY: 'ts',province:'甘肃 ' },
{ cityName: '铁岭', cityPinYin: 'tieling', cityPY: 'tl',province:'辽宁 ' },
{ cityName: '通化', cityPinYin: 'tonghua', cityPY: 'th',province:'吉林 ' },
{ cityName: '通辽', cityPinYin: 'tongliao', cityPY: 'tl',province:'内蒙古自治区' },
{ cityName: '铜陵', cityPinYin: 'tongling', cityPY: 'tl',province:'安徽 ' },
{ cityName: '铜仁', cityPinYin: 'tongren', cityPY: 'tr',province:'贵州 ' },
{ cityName: '吐鲁番', cityPinYin: 'tulufan', cityPY: 'tlf',province:'新疆维吾尔自治区' },
{ cityName: 'W', cityPinYin: 'w', cityPY: 'w' },
{ cityName: '潍坊', cityPinYin: 'weifang', cityPY: 'wf',province:'山东 ' },
{ cityName: '威海', cityPinYin: 'weihai', cityPY: 'wh',province:'山东 ' },
{ cityName: '渭南', cityPinYin: 'weinan', cityPY: 'wn',province:'陕西 ' },
{ cityName: '温州', cityPinYin: 'wenzhou', cityPY: 'wz',province:'浙江 ' },
{ cityName: '乌海', cityPinYin: 'wuhai', cityPY: 'wh',province:'内蒙古自治区' },
{ cityName: '武汉', cityPinYin: 'wuhan', cityPY: 'wh',province:'湖北 ' },
{ cityName: '芜湖', cityPinYin: 'wuhu', cityPY: 'wh',province:'安徽 ' },
{ cityName: '乌鲁木齐', cityPinYin: 'wulumuqi', cityPY: 'wlmq',province:'新疆维吾尔自治区' },
{ cityName: '武威', cityPinYin: 'wuwei', cityPY: 'ww',province:'甘肃 ' },
{ cityName: '无锡', cityPinYin: 'wuxi', cityPY: 'wx',province:'江苏 ' },
{ cityName: 'X', cityPinYin: 'x', cityPY: 'x' },
{ cityName: '西安', cityPinYin: 'xian', cityPY: 'xa',province:'陕西 ' },
{ cityName: '咸宁', cityPinYin: 'xianning', cityPY: 'xn',province:'湖北 ' },
{ cityName: '孝感', cityPinYin: 'xiaogan', cityPY: 'xg',province:'湖北 ' },
{ cityName: '厦门', cityPinYin: 'xiamen', cityPY: 'xm',province:'福建 ' },
{ cityName: '邢台', cityPinYin: 'xingtai', cityPY: 'xt',province:'河北 ' },
{ cityName: '西宁', cityPinYin: 'xining', cityPY: 'xn',province:'青海 ' },
{ cityName: '新乡', cityPinYin: 'xinxiang', cityPY: 'xx',province:'河南 ' },
{ cityName: '信阳', cityPinYin: 'xinyang', cityPY: 'xy',province:'河南 ' },
{ cityName: '新余', cityPinYin: 'xinyu', cityPY: 'xy',province:'江西 ' },
{ cityName: '忻州', cityPinYin: 'xinzhou', cityPY: 'xz',province:'山西 ' },
{ cityName: '许昌', cityPinYin: 'xuchang', cityPY: 'xc',province:'河南 ' },
{ cityName: '徐州', cityPinYin: 'xuzhou', cityPY: 'xz',province:'江苏 ' },
{ cityName: 'Y', cityPinYin: 'y', cityPY: 'y' },
{ cityName: '延安', cityPinYin: 'yanan', cityPY: 'ya',province:'陕西 ' },
{ cityName: '盐城', cityPinYin: 'yancheng', cityPY: 'yc',province:'江苏 ' },
{ cityName: '阳泉', cityPinYin: 'yangquan', cityPY: 'yq',province:'山西 ' },
{ cityName: '扬州', cityPinYin: 'yangzhou', cityPY: 'yz',province:'江苏 ' },
{ cityName: '烟台', cityPinYin: 'yantai', cityPY: 'yt',province:'山东 ' },
{ cityName: '宜宾', cityPinYin: 'yibin', cityPY: 'yb',province:'四川 ' },
{ cityName: '宜昌', cityPinYin: 'yichang', cityPY: 'yc',province:'湖北 ' },
{ cityName: '宜春', cityPinYin: 'yichun', cityPY: 'yc',province:'江西 ' },
{ cityName: '银川', cityPinYin: 'yinchuan', cityPY: 'yc',province:'宁夏回族' },
{ cityName: '营口', cityPinYin: 'yingkou', cityPY: 'yk',province:'辽宁 ' },
{ cityName: '鹰潭', cityPinYin: 'yingtan', cityPY: 'yt',province:'江西 ' },
{ cityName: '益阳', cityPinYin: 'yiyang', cityPY: 'yy',province:'湖南 ' },
{ cityName: '永州', cityPinYin: 'yongzhou', cityPY: 'yz',province:'湖南 ' },
{ cityName: '岳阳', cityPinYin: 'yueyang', cityPY: 'yy',province:'湖南 ' },
{ cityName: '榆林', cityPinYin: 'yulin', cityPY: 'yl',province:'陕西 ' },
{ cityName: '运城', cityPinYin: 'yuncheng', cityPY: 'yc',province:'山西 ' },
{ cityName: 'Z', cityPinYin: 'z', cityPY: 'z' },
{ cityName: '枣庄', cityPinYin: 'zaozhuang', cityPY: 'zz',province:'山东 ' },
{ cityName: '长春', cityPinYin: 'zhangchun', cityPY: 'zc',province:'吉林 ' },
{ cityName: '张家界', cityPinYin: 'zhangjiajie', cityPY: 'zjj',province:'湖南 ' },
{ cityName: '张家口', cityPinYin: 'zhangjiakou', cityPY: 'zjk',province:'河北 ' },
{ cityName: '长沙', cityPinYin: 'zhangsha', cityPY: 'zs',province:'湖南 ' },
{ cityName: '张掖', cityPinYin: 'zhangye', cityPY: 'zy',province:'甘肃 ' },
{ cityName: '长治', cityPinYin: 'zhangzhi', cityPY: 'zz',province:'山西 ' },
{ cityName: '漳州', cityPinYin: 'zhangzhou', cityPY: 'zz',province:'福建 ' },
{ cityName: '湛江', cityPinYin: 'zhanjiang', cityPY: 'zj',province:'广东 ' },
{ cityName: '昭通', cityPinYin: 'zhaotong', cityPY: 'zt',province:'云南 ' },
{ cityName: '郑州', cityPinYin: 'zhengzhou', cityPY: 'zz',province:'河南 ' },
{ cityName: '镇江', cityPinYin: 'zhenjiang', cityPY: 'zj',province:'江苏 ' },
{ cityName: '重庆', cityPinYin: 'zhongqing', cityPY: 'zq',province:'重庆市' },
{ cityName: '中山', cityPinYin: 'zhongshan', cityPY: 'zs',province:'广东 ' },
{ cityName: '中卫', cityPinYin: 'zhongwei', cityPY: 'zw',province:'宁夏回族' },
{ cityName: '周口', cityPinYin: 'zhoukou', cityPY: 'zk',province:'河南 ' },
{ cityName: '珠海', cityPinYin: 'zhuhai', cityPY: 'zh',province:'广东 ' },
{ cityName: '驻马店', cityPinYin: 'zhumadian', cityPY: 'zmd',province:'河南 ' },
{ cityName: '株洲', cityPinYin: 'zhuzhou', cityPY: 'zz',province:'湖南 ' },
{ cityName: '淄博', cityPinYin: 'zibo', cityPY: 'zb',province:'山东 ' },
{ cityName: '遵义', cityPinYin: 'zunyi', cityPY: 'zy',province:'贵州 ' }
]
module.exports = {
citys:citys
}
//注意由于小程序的特殊性，这边必须强行引入
3.我们需要将citys.js引入adderss文件夹中的index.js
//我这边为了方便直接将citys.js文件放入adderss文件夹中如图2所示
// adderss/index.js
let cityList = require('citys.js')
Page({
/**
* 页面的初始数据
*/
data: {
cityList:[],
cityResults:null,
cityNameTemp:'', //城市
province:'', //区
scrollAZ: null,
scrollNow: 0,
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' },],
},
bindSarchInput(e){
var that = this
var inputName = e.detail.value
var cityResults = cityList.citys
var keyWordList = []
console.log(inputName)
for(var i = 0; i < cityResults.length; i++){
if(cityResults[i].cityName.indexOf(inputName) >= 0 || cityResults[i].cityPY.indexOf(inputName.toLowerCase()) >= 0 || cityResults[i].cityPinYin.indexOf(inputName.toLowerCase()) >= 0){
keyWordList.push(cityResults[i]);
}
}
this.setData({
cityResults: keyWordList
})
},
citySelected(e){
let pages = getCurrentPages();
let currPage = null; //当前页面
let prevPage = null; //上一个页面
if(pages.length >= 2){
currPage = pages[pages.length - 1]; //当前页面
prevPage = pages[pages.length - 2]; //上一个页面
}
if (prevPage) {
prevPage.setData({
cityNameTemp: e.currentTarget.dataset.cityname,
province:e.currentTarget.dataset.province
});
}
wx.navigateBack({
url: '/pages/index/index'
})
},
bindAZ: function (e) {
var currentCityName = e.currentTarget.dataset.name
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 - 95.5,
duration: 0
})
}
})
}).exec();
} else {
this.data.scrollAZ.forEach(function (re) {
if (currentCityName == re.dataset.cityname) {
wx.pageScrollTo({
scrollTop: re.top + that.data.scrollNow - 95.5,
duration: 0
})
}
})
}
},
onPageScroll: function (e) { // 获取滚动条当前位置
this.setData({
scrollNow: e.scrollTop
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (this.data.cityResults == null) {
this.setData({
cityResults: cityList.citys
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
图2
4.这边我们来稍微调整一下样式
/* adderss/index.wxss */
.a-z{
width: 35rpx;
position: fixed;
top: 227rpx;
text-align: center;
right: 5rpx;
color: #000000;
font-size: 24rpx;
}
.city-item-A-Z{
width: 100%;
height: 40rpx;
font-size:28rpx;
color: #000;
padding-top: 18rpx;
}
.search-input {
height: 70rpx;
line-height: 60rpx;
width: 80%;
margin-left: 7.5%;
border-radius: 20rpx;
background: #fff;
margin-top: 20rpx;
padding-left: 5%;
}
.search-input-placeholder {
text-align: center;
}
.CS{
width: 21%;
display: inline-block;
text-align: center;
margin-top: 30rpx;
margin-right: 26rpx;
}
.city-item {
background: #fff;
font-size: 28rpx;
line-height: 62rpx;
border: 1rpx solid #C1C1C1;
border-radius: 10rpx;
}
.search {
height: 60rpx;
width: 90%;
border-radius: 30rpx;
background-color: #F5F5F5;
margin-left: 5%;
position: relative;
}
.search_v {
width: 100%;
height: 105rpx;
background: #fff;
padding-top: 20rpx;
}
.search image {
height: 28rpx;
width: 28rpx;
float: left;
margin: 16rpx 16rpx 0 16rpx;
}
.test1 {
height: 36rpx;
display: inline-block;
position: absolute;
top: 10rpx;
color: #6E6E6E;
background-color: #F5F5F5;
width: 87%;
}
.CS {
width: 21%;
display: inline-block;
text-align: center;
margin-top: 30rpx;
margin-right: 26rpx;
}
/* 也可以根据自己的样式需求自行调整 */
扫一扫
7934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
