微信小程序实现城市索引选择+搜索(附加城市js文件)

主要效果

源码

wxml(/img/search_icon.png和/img/add_icon.png为本地图片):

<view class="head {{search&&'r_head'}}"><!-- 搜索框 --><view class="flex-row"><view class="head_input"><image src="/img/search_icon.png" class="search_icon"></image><input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{{search}}"></input></view><view class="sha_icon" catchtap="clear_input">取消</view></view><view class="flex-row head_curr" wx:if="{{!search}}"><image src="/img/add_icon.png" class="h_c_icon" /><view>当前定位城市:{{current_city}}</view></view>
</view>
<scroll-view wx:if="{{!search}}" scroll-y="true" class="sy_container" scroll-into-view="{{scrollViewId}}"><view class="hot_city"><view class="title">热门城市</view><view class="flex-row flex-wrap box"><block wx:for="{{hot_city}}" wx:key="hot"><view class="name" hover-class="sel_city" hover-stay-time="150">{{item.name}}</view></block></view></view><view class="all_city"><view wx:for="{{city_list}}" wx:key="city_list" wx:if="{{item.data.length>0}}"><view class="letter_name" id="{{item.letter}}">{{item.letter}}</view><view class="city"><block wx:for="{{item.data}}" wx:key="data" wx:for-index="index0" wx:for-item="item0"><view class="name flex-row" hover-class="city_hover" hover-stay-time='150'>{{item0.cityName}}</view></block></view></view></view>
</scroll-view>
<!-- 侧边选择索引 -->
<view wx:if="{{!search}}"><view class="fixed_bar" style="height: {{barHeight}}px;" catchtouchstart="touchStart" catchtouchmove="touchMove" catchtouchend="touchEnd" catchtouchcancel="touchCancel"><view wx:for="{{city_list}}" wx:key="index" style="height: {{barHeight/22}}px;"><view class="bar_item flex-column j_c {{curr==index&&'bar_item_active'}}" style="width: {{barHeight/22*0.75}}px;height: {{barHeight/22*0.75}}px;">{{item.letter}}</view></view></view><view wx:if="{{showLetter &&city_list[curr].letter}}" class="fixed_letter">{{city_list[curr].letter}}</view>
</view>
<view wx:if="{{search}}" class="result_list"><view wx:if="{{result.length>0}}"><block wx:for="{{result}}" wx:key="result"><view class="r_item" hover-stay-time='150' hover-class="r_item_hover">{{item.name}}</view></block></view><view wx:else class="flex-column no_data"><image src="https://i.postimg.cc/7P00ckMG/image.png" /><view>请输入正确的城市名称呢</view></view>
</view>

二、 JS

// pages/home/homeCity/homeCity.js
const { cityData } = require('./city.js')
Page({/*** 页面的初始数据*/data: {current_city: "",search: "",hot_city: [{name: "北京"}, {name: "上海"}, {name: "广州"}, {name: "长沙"}, {name: "张家口"}, {name: "杭州"}, {name: "西安"}, {name: "南京"}, {name: "苏州"},],city_list: [],barHeight: 0,curr: -1,scrollViewId: "",barTop: 0,showLetter: false,result: [],//搜索结果},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({current_city: options.currentCity || "北京",city_list: cityData})wx.getSystemInfo({success: (res) => {let winHeight = res.windowHeightlet barHeight = winHeight - res.windowWidth / 750 * 300;this.setData({barHeight: barHeight,barTop: res.windowWidth / 750 * 180,})}})},
/*** 获取value值* @param {*} e */getValue(e) {this.setData({search: e.detail.value}, () => {this.search(e.detail.value)})},/*** 搜索成功*/search(e) {let result = [], { city_list } = this.data;city_list.forEach((item1) => {item1.data.forEach((item2) => {if (item2.keyword.indexOf(e.toLocaleUpperCase()) !== -1) {result.push({ name: item2.cityName })}})})this.setData({result,})},/*** 清空验证码*/clear_input() {this.setData({search: ""})},touch(e) {let pageY = e.touches[0].pageYlet index = Math.floor((pageY - this.data.barTop) / (this.data.barHeight / 22))//向下取整let item = this.data.city_list[index]if (item) {this.setData({scrollViewId: item.letter,curr: index})}},touchStart(e) {this.setData({showLetter: true})this.touch(e)},touchMove(e) {this.touch(e)},touchEnd() {this.setData({showLetter: false,})},touchCancel() {this.setData({showLetter: false,})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

三、wxss

/* pages/home/homeCity/homeCity.wxss */
page {height: 100%;background: #f2f5f7;
}.head {position: fixed;top: 0;left: 0;width: 100%;height: 170rpx;box-sizing: border-box;padding: 3rpx 20rpx 0;background: #fff;z-index: 9999;
}.r_head {height: 90rpx;
}.head_input {position: relative;flex: 1;
}.search_icon {position: absolute;top: 50%;left: 0;margin-top: -15rpx;width: 28rpx;height: 30rpx;padding-left: 23rpx;
}.head input {height: 60rpx;padding-left: 75rpx;font-size: 28rpx;border-radius: 30rpx;background: #f2f5f7;
}.place_holder {font-size: 28rpx;color: #999999;
}.sha_icon {margin-left: 18rpx;font-size: 28rpx;color: #333333;
}.head_curr {height: 100rpx;color: #333;font-size: 28rpx;padding-top: 20rpx;box-sizing: border-box;
}.h_c_icon {flex-shrink: 0;margin-right: 15rpx;width: 40rpx;height: 40rpx;
}.sy_container {box-sizing: border-box;width: 100%;height: 100%;padding-top: 170rpx;
}.hot_city .title {padding: 10rpx 30rpx;color: #999;font-size: 26rpx;
}.hot_city .box {background-color: #fff;padding: 5rpx 30rpx 15rpx 40rpx;box-sizing: border-box;
}.hot_city .box .name {vertical-align: top;display: inline-block;min-width: 140rpx;line-height: 56rpx;height: 56rpx;border-radius: 28rpx;font-size: 28rpx;color: #333;text-align: center;padding: 0 20rpx;box-sizing: border-box;margin-top: 10rpx;margin-right: 20rpx;position: relative;
}.hot_city .box .name::after {content: '';position: absolute;width: 200%;height: 200%;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);-webkit-box-sizing: border-box;box-sizing: border-box;left: 0;top: 0;border-radius: 56rpx;border: 1rpx solid rgb(235, 225, 225);
}.sel_city {color: #fff !important;background: pink;
}.all_city .letter_name {height: 48rpx;font-size: 24rpx;color: #999;background: #f2f5f7;padding: 0 30rpx;line-height: 48rpx;
}.all_city .city {background-color: #fff;
}.all_city .city .name {width: 100%;padding: 30rpx;font-size: 28rpx;color: #333;position: relative;overflow: hidden;
}.all_city .city .name::after {content: '';position: absolute;border-bottom: 1rpx solid #eaeef1;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);bottom: 0;right: 0;left: 30rpx;
}.city_hover {background-color: #eee !important;
}.fixed_bar {position: fixed;z-index: 999;top: 180rpx;right: 0px;padding-right: 10rpx;width: 50rpx;font-size: 22rpx;text-align: center;
}.bar_item {background-color: rgb(233, 228, 220);border-radius: 50%;
}@media screen and (max-width: 320px) {.fixed_bar {font-size: 20rpx;}
}.bar_item_active {background-color: #fff;box-shadow: 5rpx 5rpx 5rpx #f7c3ee;
}.fixed_letter {position: absolute;z-index: 20;width: 160rpx;height: 160rpx;left: 50%;top: 50%;margin-left: -80rpx;margin-top: -80rpx;border-radius: 80rpx;text-align: center;line-height: 160rpx;font-size: 70rpx;color: #fff;background-color: rgba(0, 0, 0, 0.5);box-shadow: 5rpx 5rpx 5rpx #f7c3ee;
}/* 搜索结果 */
.result_list {padding-top: 90rpx;background: #fff;width: 100%;
}.r_item {width: 100%;position: relative;padding: 30rpx 0 30rpx 30rpx;font-size: 28rpx;color: #333;box-sizing: border-box;
}.r_item::after {content: '';position: absolute;border-bottom: 1rpx solid #eaeef1;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);bottom: 0;right: 0;left: 30rpx;
}.r_item_hover {background-color: #eee !important;
}.no_data {height: 500rpx;justify-content: center;font-size: 27rpx;color: #999;
}.no_data image {width: 250rpx;height: 162rpx;margin-bottom: 30rpx;
}

四、

city.js文件内容

module.exports = {cityData: [{"letter": "A","data": [{"cityName": "阿坝","keyword": "阿坝ABA"},{"cityName": "阿克苏","keyword": "阿克苏AKESU"},{"cityName": "阿拉善","keyword": "阿拉善ALASHAN"},{"cityName": "阿勒泰","keyword": "阿勒泰ALETAI"},{"cityName": "阿里","keyword": "阿里ALI"},{"cityName": "安康","keyword": "安康ANKANG"},{"cityName": "安庆","keyword": "安庆ANQING"},{"cityName": "鞍山","keyword": "鞍山ANSHAN"},{"cityName": "马鞍山","keyword": "马鞍山MAANSHAN"},{"cityName": "安顺","keyword": "安顺ANSHUN"},{"cityName": "安阳","keyword": "安阳ANYANG"}]},{"letter": "B","data": [{"cityName": "白城","keyword": "白城BAICHENG"},{"cityName": "白山","keyword": "白山BAISHAN"},{"cityName": "白银","keyword": "白银BAIYIN"},{"cityName": "保定","keyword": "保定BAODING"},{"cityName": "宝鸡","keyword": "宝鸡BAOJI"},{"cityName": "保山","keyword": "保山BAOSHAN"},{"cityName": "包头","keyword": "包头BAOTOU"},{"cityName": "巴彦淖尔","keyword": "巴彦淖尔BAYANNAOER"},{"cityName": "巴音郭楞","keyword": "巴音郭楞BAYINGUOLENG"},{"cityName": "巴中","keyword": "巴中BAZHONG"},{"cityName": "北海","keyword": "北海BEIHAI"},{"cityName": "北京","keyword": "北京BEIJING"},{"cityName": "蚌埠","keyword": "蚌埠BENGBU"},{"cityName": "本溪","keyword": "本溪BENXI"},{"cityName": "毕节","keyword": "毕节BIJIE"},{"cityName": "滨州","keyword": "滨州BINZHOU"},{"cityName": "博尔塔拉","keyword": "博尔塔拉BOERTALA"},{"cityName": "百色","keyword": "百色BOSE"},{"cityName": "亳州","keyword": "亳州BOZHOU"}]},{"letter": "C","data": [{"cityName": "沧州","keyword": "沧州CANGZHOU"},{"cityName": "长春","keyword": "长春CHANGCHUN"},{"cityName": "常德","keyword": "常德CHANGDE"},{"cityName": "昌都","keyword": "昌都CHANGDU"},{"cityName": "昌吉","keyword": "昌吉CHANGJI"},{"cityName": "长沙","keyword": "长沙CHANGSHA"},{"cityName": "长治","keyword": "长治CHANGZHI"},{"cityName": "常州","keyword": "常州CHANGZHOU"},{"cityName": "潮州","keyword": "潮州CHAOZHOU"},{"cityName": "承德","keyword": "承德CHENGDE"},{"cityName": "成都","keyword": "成都CHENGDU"},{"cityName": "郴州","keyword": "郴州CHENZHOU"},{"cityName": "赤峰","keyword": "赤峰CHIFENG"},{"cityName": "池州","keyword": "池州CHIZHOU"},{"cityName": "重庆","keyword": "重庆CHONGQING"},{"cityName": "崇左","keyword": "崇左CHONGZUO"},{"cityName": "楚雄","keyword": "楚雄CHUXIONG"},{"cityName": "滁州","keyword": "滁州CHUZHOU"}]},{"letter": "D","data": [{"cityName": "大理","keyword": "大理DALI"},{"cityName": "大连","keyword": "大连DALIAN"},{"cityName": "丹东","keyword": "丹东DANDONG"},{"cityName": "儋州","keyword": "儋州DANZHOU"},{"cityName": "大庆","keyword": "大庆DAQING"},{"cityName": "大同","keyword": "大同DATONG"},{"cityName": "大兴安岭","keyword": "大兴安岭DAXINGANLING"},{"cityName": "达州","keyword": "达州DAZHOU"},{"cityName": "德宏","keyword": "德宏DEHONG"},{"cityName": "德阳","keyword": "德阳DEYANG"},{"cityName": "德州","keyword": "德州DEZHOU"},{"cityName": "定西","keyword": "定西DINGXI"},{"cityName": "迪庆","keyword": "迪庆DIQING"},{"cityName": "东莞","keyword": "东莞DONGGUAN"},{"cityName": "东营","keyword": "东营DONGYING"}]},{"letter": "E","data": [{"cityName": "鄂尔多斯","keyword": "鄂尔多斯EERDUOSI"},{"cityName": "恩施","keyword": "恩施ENSHI"},{"cityName": "鄂州","keyword": "鄂州EZHOU"}]},{"letter": "F","data": [{"cityName": "防城港","keyword": "防城港FANGCHENGGANG"},{"cityName": "佛山","keyword": "佛山FOSHAN"},{"cityName": "抚顺","keyword": "抚顺FUSHUN"},{"cityName": "阜新","keyword": "阜新FUXIN"},{"cityName": "阜阳","keyword": "阜阳FUYANG"},{"cityName": "抚州","keyword": "抚州FUZHOU"},{"cityName": "福州","keyword": "福州FUZHOU"}]},{"letter": "G","data": [{"cityName": "甘南","keyword": "甘南GANNAN"},{"cityName": "赣州","keyword": "赣州GANZHOU"},{"cityName": "甘孜","keyword": "甘孜GANZI"},{"cityName": "广安","keyword": "广安GUANGAN"},{"cityName": "广元","keyword": "广元GUANGYUAN"},{"cityName": "广州","keyword": "广州GUANGZHOU"},{"cityName": "贵港","keyword": "贵港GUIGANG"},{"cityName": "桂林","keyword": "桂林GUILIN"},{"cityName": "贵阳","keyword": "贵阳GUIYANG"},{"cityName": "果洛","keyword": "果洛GUOLUO"},{"cityName": "固原","keyword": "固原GUYUAN"}]},{"letter": "H","data": [{"cityName": "哈尔滨","keyword": "哈尔滨HAERBIN"},{"cityName": "海北","keyword": "海北HAIBEI"},{"cityName": "海东","keyword": "海东HAIDONG"},{"cityName": "海口","keyword": "海口HAIKOU"},{"cityName": "海南藏族自治州","keyword": "海南藏族自治州HAINAN"},{"cityName": "海南","keyword": "海南藏族自治州HAINAN"},{"cityName": "海南","keyword": "海南HAINAN"},{"cityName": "海西","keyword": "海西HAIXI"},{"cityName": "哈密","keyword": "哈密HAMI"},{"cityName": "邯郸","keyword": "邯郸HANDAN"},{"cityName": "杭州","keyword": "杭州HANGZHOU"},{"cityName": "汉中","keyword": "汉中HANZHONG"},{"cityName": "河北","keyword": "河北HEBEI"},{"cityName": "鹤壁","keyword": "鹤壁HEBI"},{"cityName": "河池","keyword": "河池HECHI"},{"cityName": "合肥","keyword": "合肥HEFEI"},{"cityName": "鹤岗","keyword": "鹤岗HEGANG"},{"cityName": "黑河","keyword": "黑河HEIHE"},{"cityName": "河南","keyword": "河南HENAN"},{"cityName": "衡水","keyword": "衡水HENGSHUI"},{"cityName": "衡阳","keyword": "衡阳HENGYANG"},{"cityName": "和田","keyword": "和田HETIAN"},{"cityName": "河源","keyword": "河源HEYUAN"},{"cityName": "菏泽","keyword": "菏泽HEZE"},{"cityName": "贺州","keyword": "贺州HEZHOU"},{"cityName": "红河","keyword": "红河HONGHE"},{"cityName": "淮安","keyword": "淮安HUAIAN"},{"cityName": "淮北","keyword": "淮北HUAIBEI"},{"cityName": "怀化","keyword": "怀化HUAIHUA"},{"cityName": "淮南","keyword": "淮南HUAINAN"},{"cityName": "黄冈","keyword": "黄冈HUANGGANG"},{"cityName": "黄南","keyword": "黄南HUANGNAN"},{"cityName": "黄山","keyword": "黄山HUANGSHAN"},{"cityName": "黄石","keyword": "黄石HUANGSHI"},{"cityName": "湖北","keyword": "湖北HUBEI"},{"cityName": "呼和浩特","keyword": "呼和浩特HUHEHAOTE"},{"cityName": "惠州","keyword": "惠州HUIZHOU"},{"cityName": "葫芦岛","keyword": "葫芦岛HULUDAO"},{"cityName": "呼伦贝尔","keyword": "呼伦贝尔HULUNBEIER"},{"cityName": "湖州","keyword": "湖州HUZHOU"}]},// {//   "letter": "I",//   "data": []// },{"letter": "J","data": [{"cityName": "佳木斯","keyword": "佳木斯JIAMUSI"},{"cityName": "吉安","keyword": "吉安JIAN"},{"cityName": "江门","keyword": "江门JIANGMEN"},{"cityName": "焦作","keyword": "焦作JIAOZUO"},{"cityName": "嘉兴","keyword": "嘉兴JIAXING"},{"cityName": "嘉峪关","keyword": "嘉峪关JIAYUGUAN"},{"cityName": "揭阳","keyword": "揭阳JIEYANG"},{"cityName": "吉林","keyword": "吉林JILIN"},{"cityName": "济南","keyword": "济南JINAN"},{"cityName": "金昌","keyword": "金昌JINCHANG"},{"cityName": "晋城","keyword": "晋城JINCHENG"},{"cityName": "景德镇","keyword": "景德镇JINGDEZHEN"},{"cityName": "荆门","keyword": "荆门JINGMEN"},{"cityName": "荆州","keyword": "荆州JINGZHOU"},{"cityName": "金华","keyword": "金华JINHUA"},{"cityName": "济宁","keyword": "济宁JINING"},{"cityName": "晋中","keyword": "晋中JINZHONG"},{"cityName": "锦州","keyword": "锦州JINZHOU"},{"cityName": "九江","keyword": "九江JIUJIANG"},{"cityName": "酒泉","keyword": "酒泉JIUQUAN"},{"cityName": "鸡西","keyword": "鸡西JIXI"}]},{"letter": "K","data": [{"cityName": "开封","keyword": "开封KAIFENG"},{"cityName": "喀什","keyword": "喀什KASHI"},{"cityName": "克拉玛依","keyword": "克拉玛依KELAMAYI"},{"cityName": "克孜勒苏","keyword": "克孜勒苏KEZILESU"},{"cityName": "昆明","keyword": "昆明KUNMING"}]},{"letter": "L","data": [{"cityName": "来宾","keyword": "来宾LAIBIN"},{"cityName": "莱芜","keyword": "莱芜LAIWU"},{"cityName": "廊坊","keyword": "廊坊LANGFANG"},{"cityName": "兰州","keyword": "兰州LANZHOU"},{"cityName": "拉萨","keyword": "拉萨LASA"},{"cityName": "乐山","keyword": "乐山LESHAN"},{"cityName": "凉山","keyword": "凉山LIANGSHAN"},{"cityName": "连云港","keyword": "连云港LIANYUNGANG"},{"cityName": "聊城","keyword": "聊城LIAOCHENG"},{"cityName": "辽阳","keyword": "辽阳LIAOYANG"},{"cityName": "辽源","keyword": "辽源LIAOYUAN"},{"cityName": "丽江","keyword": "丽江LIJIANG"},{"cityName": "临沧","keyword": "临沧LINCANG"},{"cityName": "临汾","keyword": "临汾LINFEN"},{"cityName": "临夏","keyword": "临夏LINXIA"},{"cityName": "临沂","keyword": "临沂LINYI"},{"cityName": "林芝","keyword": "林芝LINZHI"},{"cityName": "丽水","keyword": "丽水LISHUI"},{"cityName": "六盘水","keyword": "六盘水LIUPANSHUI"},{"cityName": "柳州","keyword": "柳州LIUZHOU"},{"cityName": "陇南","keyword": "陇南LONGNAN"},{"cityName": "龙岩","keyword": "龙岩LONGYAN"},{"cityName": "娄底","keyword": "娄底LOUDI"},{"cityName": "六安","keyword": "六安LUAN"},{"cityName": "洛阳","keyword": "洛阳LUOYANG"},{"cityName": "泸州","keyword": "泸州LUZHOU"},{"cityName": "吕梁","keyword": "吕梁LVLIANG"}]},{"letter": "M","data": [{"cityName": "马鞍山","keyword": "马鞍山MAANSHAN"},{"cityName": "茂名","keyword": "茂名MAOMING"},{"cityName": "眉山","keyword": "眉山MEISHAN"},{"cityName": "梅州","keyword": "梅州MEIZHOU"},{"cityName": "绵阳","keyword": "绵阳MIANYANG"},{"cityName": "牡丹江","keyword": "牡丹江MUDANJIANG"}]},{"letter": "N","data": [{"cityName": "南昌","keyword": "南昌NANCHANG"},{"cityName": "南充","keyword": "南充NANCHONG"},{"cityName": "南京","keyword": "南京NANJING"},{"cityName": "南宁","keyword": "南宁NANNING"},{"cityName": "南平","keyword": "南平NANPING"},{"cityName": "南通","keyword": "南通NANTONG"},{"cityName": "南阳","keyword": "南阳NANYANG"},{"cityName": "那曲","keyword": "那曲NAQU"},{"cityName": "内江","keyword": "内江NEIJIANG"},{"cityName": "宁波","keyword": "宁波NINGBO"},{"cityName": "宁德","keyword": "宁德NINGDE"},{"cityName": "怒江","keyword": "怒江NUJIANG"}]},// {//   "letter": "O",//   "data": []// },{"letter": "P","data": [{"cityName": "盘锦","keyword": "盘锦PANJIN"},{"cityName": "攀枝花","keyword": "攀枝花PANZHIHUA"},{"cityName": "平顶山","keyword": "平顶山PINGDINGSHAN"},{"cityName": "平凉","keyword": "平凉PINGLIANG"},{"cityName": "萍乡","keyword": "萍乡PINGXIANG"},{"cityName": "普洱","keyword": "普洱PUER"},{"cityName": "莆田","keyword": "莆田PUTIAN"},{"cityName": "濮阳","keyword": "濮阳PUYANG"}]},{"letter": "Q","data": [{"cityName": "黔东南","keyword": "黔东南QIANDONGNAN"},{"cityName": "黔南","keyword": "黔南QIANNAN"},{"cityName": "黔西南","keyword": "黔西南QIANXINAN"},{"cityName": "青岛","keyword": "青岛QINGDAO"},{"cityName": "庆阳","keyword": "庆阳QINGYANG"},{"cityName": "清远","keyword": "清远QINGYUAN"},{"cityName": "秦皇岛","keyword": "秦皇岛QINHUANGDAO"},{"cityName": "钦州","keyword": "钦州QINZHOU"},{"cityName": "齐齐哈尔","keyword": "齐齐哈尔QIQIHAER"},{"cityName": "七台河","keyword": "七台河QITAIHE"},{"cityName": "泉州","keyword": "泉州QUANZHOU"},{"cityName": "曲靖","keyword": "曲靖QUJING"},{"cityName": "衢州","keyword": "衢州QUZHOU"}]},{"letter": "R","data": [{"cityName": "日喀则","keyword": "日喀则RIKAZE"},{"cityName": "日照","keyword": "日照RIZHAO"}]},{"letter": "S","data": [{"cityName": "三门峡","keyword": "三门峡SANMENXIA"},{"cityName": "三明","keyword": "三明SANMING"},{"cityName": "三沙","keyword": "三沙SANSHA"},{"cityName": "三亚","keyword": "三亚SANYA"},{"cityName": "上海","keyword": "上海SHANGHAI"},{"cityName": "商洛","keyword": "商洛SHANGLUO"},{"cityName": "商丘","keyword": "商丘SHANGQIU"},{"cityName": "上饶","keyword": "上饶SHANGRAO"},{"cityName": "山南","keyword": "山南SHANNAN"},{"cityName": "汕头","keyword": "汕头SHANTOU"},{"cityName": "汕尾","keyword": "汕尾SHANWEI"},{"cityName": "韶关","keyword": "韶关SHAOGUAN"},{"cityName": "绍兴","keyword": "绍兴SHAOXING"},{"cityName": "邵阳","keyword": "邵阳SHAOYANG"},{"cityName": "沈阳","keyword": "沈阳SHENYANG"},{"cityName": "深圳","keyword": "深圳SHENZHEN"},{"cityName": "石家庄","keyword": "石家庄SHIJIAZHUANG"},{"cityName": "十堰","keyword": "十堰SHIYAN"},{"cityName": "石嘴山","keyword": "石嘴山SHIZUISHAN"},{"cityName": "双鸭山","keyword": "双鸭山SHUANGYASHAN"},{"cityName": "朔州","keyword": "朔州SHUOZHOU"},{"cityName": "四平","keyword": "四平SIPING"},{"cityName": "松原","keyword": "松原SONGYUAN"},{"cityName": "绥化","keyword": "绥化SUIHUA"},{"cityName": "遂宁","keyword": "遂宁SUINING"},{"cityName": "随州","keyword": "随州SUIZHOU"},{"cityName": "宿迁","keyword": "宿迁SUQIAN"},{"cityName": "苏州","keyword": "苏州SUZHOU"},{"cityName": "宿州","keyword": "宿州SUZHOU"}]},{"letter": "T","data": [{"cityName": "塔城","keyword": "塔城TACHENG"},{"cityName": "漯河","keyword": "漯河TAHE"},{"cityName": "泰安","keyword": "泰安TAIAN"},{"cityName": "太原","keyword": "太原TAIYUAN"},{"cityName": "泰州","keyword": "泰州TAIZHOU"},{"cityName": "台州","keyword": "台州TAIZHOU"},{"cityName": "唐山","keyword": "唐山TANGSHAN"},{"cityName": "天津","keyword": "天津TIANJIN"},{"cityName": "天水","keyword": "天水TIANSHUI"},{"cityName": "铁岭","keyword": "铁岭TIELING"},{"cityName": "铜川","keyword": "铜川TONGCHUAN"},{"cityName": "通化","keyword": "通化TONGHUA"},{"cityName": "通辽","keyword": "通辽TONGLIAO"},{"cityName": "铜陵","keyword": "铜陵TONGLING"},{"cityName": "铜仁","keyword": "铜仁TONGREN"},{"cityName": "吐鲁番","keyword": "吐鲁番TULUFAN"}]},// {//   "letter": "U",//   "data": []// },// {//   "letter": "V",//   "data": []// },{"letter": "W","data": [{"cityName": "潍坊","keyword": "潍坊WEIFANG"},{"cityName": "威海","keyword": "威海WEIHAI"},{"cityName": "渭南","keyword": "渭南WEINAN"},{"cityName": "文山","keyword": "文山WENSHAN"},{"cityName": "温州","keyword": "温州WENZHOU"},{"cityName": "乌海","keyword": "乌海WUHAI"},{"cityName": "武汉","keyword": "武汉WUHAN"},{"cityName": "芜湖","keyword": "芜湖WUHU"},{"cityName": "乌兰察布","keyword": "乌兰察布WULANCHABU"},{"cityName": "乌鲁木齐","keyword": "乌鲁木齐WULUMUQI"},{"cityName": "武威","keyword": "武威WUWEI"},{"cityName": "无锡","keyword": "无锡WUXI"},{"cityName": "吴忠","keyword": "吴忠WUZHONG"},{"cityName": "梧州","keyword": "梧州WUZHOU"}]},{"letter": "X","data": [{"cityName": "厦门","keyword": "厦门XIAMEN"},{"cityName": "西安","keyword": "西安XIAN"},{"cityName": "湘潭","keyword": "湘潭XIANGTAN"},{"cityName": "湘西","keyword": "湘西XIANGXI"},{"cityName": "襄阳","keyword": "襄阳XIANGYANG"},{"cityName": "咸宁","keyword": "咸宁XIANNING"},{"cityName": "咸阳","keyword": "咸阳XIANYANG"},{"cityName": "孝感","keyword": "孝感XIAOGAN"},{"cityName": "锡林郭勒","keyword": "锡林郭勒XILINGUOLE"},{"cityName": "兴安","keyword": "大兴安岭DAXINGANLING"},{"cityName": "兴安","keyword": "兴安XINGAN"},{"cityName": "邢台","keyword": "邢台XINGTAI"},{"cityName": "西宁","keyword": "西宁XINING"},{"cityName": "新疆","keyword": "新疆XINJIANG"},{"cityName": "新乡","keyword": "新乡XINXIANG"},{"cityName": "信阳","keyword": "信阳XINYANG"},{"cityName": "新余","keyword": "新余XINYU"},{"cityName": "忻州","keyword": "忻州XINZHOU"},{"cityName": "西双版纳","keyword": "西双版纳XISHUANGBANNA"},{"cityName": "宣城","keyword": "宣城XUANCHENG"},{"cityName": "许昌","keyword": "许昌XUCHANG"},{"cityName": "徐州","keyword": "徐州XUZHOU"}]},{"letter": "Y","data": [{"cityName": "雅安","keyword": "雅安YAAN"},{"cityName": "延安","keyword": "延安YANAN"},{"cityName": "延边","keyword": "延边YANBIAN"},{"cityName": "盐城","keyword": "盐城YANCHENG"},{"cityName": "阳江","keyword": "阳江YANGJIANG"},{"cityName": "阳泉","keyword": "阳泉YANGQUAN"},{"cityName": "扬州","keyword": "扬州YANGZHOU"},{"cityName": "烟台","keyword": "烟台YANTAI"},{"cityName": "宜宾","keyword": "宜宾YIBIN"},{"cityName": "宜昌","keyword": "宜昌YICHANG"},{"cityName": "伊春","keyword": "伊春YICHUN"},{"cityName": "宜春","keyword": "宜春YICHUN"},{"cityName": "伊犁","keyword": "伊犁YILI"},{"cityName": "银川","keyword": "银川YINCHUAN"},{"cityName": "营口","keyword": "营口YINGKOU"},{"cityName": "鹰潭","keyword": "鹰潭YINGTAN"},{"cityName": "益阳","keyword": "益阳YIYANG"},{"cityName": "永州","keyword": "永州YONGZHOU"},{"cityName": "岳阳","keyword": "岳阳YUEYANG"},{"cityName": "玉林","keyword": "玉林YULIN"},{"cityName": "榆林","keyword": "榆林YULIN"},{"cityName": "运城","keyword": "运城YUNCHENG"},{"cityName": "云浮","keyword": "云浮YUNFU"},{"cityName": "玉树","keyword": "玉树YUSHU"},{"cityName": "玉溪","keyword": "玉溪YUXI"}]},{"letter": "Z","data": [{"cityName": "枣庄","keyword": "枣庄ZAOZHUANG"},{"cityName": "张家界","keyword": "张家界ZHANGJIAJIE"},{"cityName": "张家口","keyword": "张家口ZHANGJIAKOU"},{"cityName": "张掖","keyword": "张掖ZHANGYE"},{"cityName": "漳州","keyword": "漳州ZHANGZHOU"},{"cityName": "湛江","keyword": "湛江ZHANJIANG"},{"cityName": "肇庆","keyword": "肇庆ZHAOQING"},{"cityName": "昭通","keyword": "昭通ZHAOTONG"},{"cityName": "朝阳","keyword": "朝阳ZHAOYANG"},{"cityName": "郑州","keyword": "郑州ZHENGZHOU"},{"cityName": "镇江","keyword": "镇江ZHENJIANG"},{"cityName": "中山","keyword": "中山ZHONGSHAN"},{"cityName": "中卫","keyword": "中卫ZHONGWEI"},{"cityName": "周口","keyword": "周口ZHOUKOU"},{"cityName": "舟山","keyword": "舟山ZHOUSHAN"},{"cityName": "珠海","keyword": "珠海ZHUHAI"},{"cityName": "驻马店","keyword": "驻马店ZHUMADIAN"},{"cityName": "株洲","keyword": "株洲ZHUZHOU"},{"cityName": "淄博","keyword": "淄博ZIBO"},{"cityName": "自贡","keyword": "自贡ZIGONG"},{"cityName": "资阳","keyword": "资阳ZIYANG"},{"cityName": "遵义","keyword": "遵义ZUNYI"}]}]
}

全局app.wxss

/**app.wxss**/

page {

background: #f5f5f5;

--pink: #ffc0cb;

--white: #fff;

--red: #e54d42;

--orange: #f37b1d;

--yellow: #fbbd08;

--olive: #8dc63f;

--green: #39b54a;

--grey: #8799a3;

--black: #333333;

--darkGray: #666666;

}

/* 多行文字换行 */

.line_ellipsis {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.flex-row {

display: flex;

flex-direction: row;

align-items: center;

}

.j_b {

justify-content: space-between;

}

.flex-column {

display: flex;

flex-direction: column;

align-items: center;

}

/* 遮罩 */

.mask {

position: fixed;

z-index: 1000;

top: 0;

right: 0;

left: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.6);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

}

/* 单行文字换行 */

.text_ellipsis {

/*宽度自定义*/

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

/* 多行文字换行 */

.line_ellipsis {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.col {

flex-direction: column;

}

.flex {

display: flex;

align-items: flex-start;

}

/* 去掉button的默认样式*/

button {

padding: 0 !important;

background: transparent;

font-weight: normal;

}

button::after {

outline: none;

border: none;

display: none;

}

/*点击后样式*/

.button-hover {

background: transparent;

}

/* 背景图片 */

.bg_img {

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

left: 0;

top: 0;

}

.j_c {

justify-content: center;

}

.j_e {

justify-content: flex-end;

}

.j_a {

justify-content: space-around;

}

.flex_1 {

flex: 1;

}

.flex_0 {

flex-shrink: 0;

}

image {

vertical-align: middle;

display: inline-block;

}

.flex-wrap {

flex-wrap: wrap;

}

.mb20 {

margin-bottom: 20rpx;

}

.mb10 {

margin-bottom: 10rpx;

}

微信小程序实现城市索引选择+搜索(附加城市js文件)相关推荐

微信小程序根据字母索引选择(仿京东)
效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578/12314561 .wxml ...
微信小程序如何在地图选择地址并返回经纬度
微信小程序如何在地图选择地址并返回经纬度微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息实现效果: var that = thiswx.chooseLocation({suc ...
微信小程序-获取用户位置（经纬度+所在城市）
微信小程序-获取用户位置(经纬度+所在城市) 文章目录微信小程序-获取用户位置(经纬度+所在城市) 一.目标二.实现思路三.实现步骤 3.1 用到的接口函数 3.2 具体步骤 3.2.1 创建界 ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
微信小程序调用腾讯位置服务获取城市列表
微信小程序调用腾讯位置服务获取城市列表注意前期的准备: 1.需要用到微信小程序JavaScript SDK https://lbs.qq.com/miniProgram/jsSdk/jsSdkGui ...
【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
微信小程序通过 vant 实现选择城市
效果图 1. 准备新建 utlis > city.js city.js 数据源配置导出 export default [{"letter": "A" ...
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
文章目录前言效果图第一步.登录腾讯地图申请属于自己小程序的key 第二步.登录微信公众平台添加插件第三步.引入插件包,配置定位允许授权第四步.通过点击事件使用插件第五步.拿到插件接口返回的 ...
微信小程序开发—有关日期选择的下拉框
WXLL代码实现 <picker class='time-picker' mode="multiSelector" bindchange="bindStartMul ...

微信小程序实现城市索引选择+搜索(附加城市js文件)

源码

wxml(/img/search_icon.png和/img/add_icon.png为本地图片):

全局app.wxss

微信小程序实现城市索引选择+搜索(附加城市js文件)相关推荐

最新文章

热门文章