小程序城市选择自定义组件

小程序城市选择自定义组件

前言文件目录index中引入组件address组件部分

针对微信小程序选择城市这块，本文开发的小程序为开发提供者一个参考，注意：如果不了解如何使用微信小程序自定义组件的，建议先看一下官方说明：https://developers./miniprogram/dev/framework/custom-component/

前言

类似功能的小程序也有挺多，其实都是大同小异，有部分样式是参考其他小程序，该小程序还在开发中，还有很多没有完善…

有问题关注公众号回复：'微信’，加我微信，备注“公众号”。

文件目录

components address address.js //自定义组件逻辑处理address.jsonaddress.wxml //自定义组件视图address.wxss //自定义组件样式文件config.wxs //小程序脚本配置文件 pages index index.jsindex.jsonindex.wxmlindex.wxss

index中引入组件

首先要在index,json中引入组件，代码如下

{"usingComponents": {"address": "../../components/address/address"}}

然后在index.wxml中使用组件

<view class='wrapper'> <address my-city="北京" data="{{city}}" binddetail="bindtap"></address></view> <!--参数说明:data [Object] : 列表所需要的数据（所有城市的json格式）my-city [String]: 我的城市， -->

city中的数据如图所示，如需这些数据可以私信我。

let city = require(’…/…/data/allcity.js’);

var city = [{title:"热门城市",type:'hot',item: [// {// "name": "北京",// "key": "热门",// "test":"testValue"// },// {// "name": "上海",// "key": "热门"// },// {// "name": "广州",// "key": "热门"// },// {// "name": "深圳",// "key": "热门"// },// {// "name": "成都",// "key": "热门"// },// {// "name": "重庆",// "key": "热门"// },// {// "name": "天津",// "key": "热门"// },// {// "name": "杭州",// "key": "热门"// },// {// "name": "南京",// "key": "热门"// },// {// "name": "苏州",// "key": "热门"// },// {// "name": "武汉",// "key": "热门"// },// {// "name": "西安",// "key": "热门"// }]}, {title:"A",item: [{"name": "阿坝","key": "A"},{"name": "阿拉善","key": "A"},{"name": "阿里","key": "A"},{"name": "安康","key": "A"},{"name": "安庆","key": "A"},{"name": "鞍山","key": "A"},{"name": "安顺","key": "A"},{"name": "安阳","key": "A"},{"name": "澳门","key": "A"}]}, {title: "B",item: [{"name": "北京","key": "B"},{"name": "白银","key": "B"},{"name": "保定","key": "B"},{"name": "宝鸡","key": "B"},{"name": "保山","key": "B"},{"name": "包头","key": "B"},{"name": "巴中","key": "B"},{"name": "北海","key": "B"},{"name": "蚌埠","key": "B"},{"name": "本溪","key": "B"},{"name": "毕节","key": "B"},{"name": "滨州","key": "B"},{"name": "百色","key": "B"},{"name": "亳州","key": "B"}]}, {title: "C",item: [{"name": "重庆","key": "C"},{"name": "成都","key": "C"},{"name": "长沙","key": "C"},{"name": "长春","key": "C"},{"name": "沧州","key": "C"},{"name": "常德","key": "C"},{"name": "昌都","key": "C"},{"name": "长治","key": "C"},{"name": "常州","key": "C"},{"name": "巢湖","key": "C"},{"name": "潮州","key": "C"},{"name": "承德","key": "C"},{"name": "郴州","key": "C"},{"name": "赤峰","key": "C"},{"name": "池州","key": "C"},{"name": "崇左","key": "C"},{"name": "楚雄","key": "C"},{"name": "滁州","key": "C"},{"name": "朝阳","key": "C"}]}, {title: "D",item: [{"name": "大连","key": "D"},{"name": "东莞","key": "D"},{"name": "大理","key": "D"},{"name": "丹东","key": "D"},{"name": "大庆","key": "D"},{"name": "大同","key": "D"},{"name": "大兴安岭","key": "D"},{"name": "德宏","key": "D"},{"name": "德阳","key": "D"},{"name": "德州","key": "D"},{"name": "定西","key": "D"},{"name": "迪庆","key": "D"},{"name": "东营","key": "D"}]}, {title: "E",item: [{"name": "鄂尔多斯","key": "E"},{"name": "恩施","key": "E"},{"name": "鄂州","key": "E"}]}, {title: "F",item: [{"name": "福州","key": "F"},{"name": "防城港","key": "F"},{"name": "佛山","key": "F"},{"name": "抚顺","key": "F"},{"name": "抚州","key": "F"},{"name": "阜新","key": "F"},{"name": "阜阳","key": "F"}]}, {title: "G",item: [{"name": "广州","key": "G"},{"name": "赣州","key": "G"},{"name": "桂林","key": "G"},{"name": "贵阳","key": "G"},{"name": "甘南","key": "G"},{"name": "甘孜","key": "G"},{"name": "广安","key": "G"},{"name": "广元","key": "G"},{"name": "果洛","key": "G"},{"name": "贵港","key": "G"}]}, {title: "H",item: [{"name": "杭州","key": "H"},{"name": "哈尔滨","key": "H"},{"name": "合肥","key": "H"},{"name": "海口","key": "H"},{"name": "海东","key": "H"},{"name": "海北","key": "H"},{"name": "海南","key": "H"},{"name": "海西","key": "H"},{"name": "邯郸","key": "H"},{"name": "汉中","key": "H"},{"name": "鹤壁","key": "H"},{"name": "河池","key": "H"},{"name": "鹤岗","key": "H"},{"name": "黑河","key": "H"},{"name": "衡水","key": "H"},{"name": "衡阳","key": "H"},{"name": "河源","key": "H"},{"name": "贺州","key": "H"},{"name": "红河","key": "H"},{"name": "淮安","key": "H"},{"name": "淮北","key": "H"},{"name": "怀化","key": "H"},{"name": "淮南","key": "H"},{"name": "黄冈","key": "H"},{"name": "黄南","key": "H"},{"name": "黄山","key": "H"},{"name": "黄石","key": "H"},{"name": "惠州","key": "H"},{"name": "葫芦岛","key": "H"},{"name": "呼伦贝尔","key": "H"},{"name": "湖州","key": "H"},{"name": "菏泽","key": "H"}]}, {title: "J",item: [{"name": "济南","key": "J"},{"name": "佳木斯","key": "J"},{"name": "吉安","key": "J"},{"name": "江门","key": "J"},{"name": "焦作","key": "J"},{"name": "嘉兴","key": "J"},{"name": "嘉峪关","key": "J"},{"name": "揭阳","key": "J"},{"name": "吉林","key": "J"},{"name": "金昌","key": "J"},{"name": "晋城","key": "J"},{"name": "景德镇","key": "J"},{"name": "荆门","key": "J"},{"name": "荆州","key": "J"},{"name": "金华","key": "J"},{"name": "济宁","key": "J"},{"name": "晋中","key": "J"},{"name": "锦州","key": "J"},{"name": "九江","key": "J"},{"name": "酒泉","key": "J"}]}, {title: "K",item: [{"name": "昆明","key": "K"},{"name": "开封","key": "K"}]}, {title: "L",item:[{"name": "兰州","key": "L"},{"name": "拉萨","key": "L"},{"name": "来宾","key": "L"},{"name": "莱芜","key": "L"},{"name": "廊坊","key": "L"},{"name": "乐山","key": "L"},{"name": "凉山","key": "L"},{"name": "连云港","key": "L"},{"name": "聊城","key": "L"},{"name": "辽阳","key": "L"},{"name": "辽源","key": "L"},{"name": "丽江","key": "L"},{"name": "临沧","key": "L"},{"name": "临汾","key": "L"},{"name": "临夏","key": "L"},{"name": "临沂","key": "L"},{"name": "林芝","key": "L"},{"name": "丽水","key": "L"},{"name": "六安","key": "L"},{"name": "六盘水","key": "L"},{"name": "柳州","key": "L"},{"name": "陇南","key": "L"},{"name": "龙岩","key": "L"},{"name": "娄底","key": "L"},{"name": "漯河","key": "L"},{"name": "洛阳","key": "L"},{"name": "泸州","key": "L"},{"name": "吕梁","key": "L"}]}, {title: "M",item: [{"name": "马鞍山","key": "M"},{"name": "茂名","key": "M"},{"name": "眉山","key": "M"},{"name": "梅州","key": "M"},{"name": "绵阳","key": "M"},{"name": "牡丹江","key": "M"}]}, {title: "N",item: [{"name": "南京","key": "N"},{"name": "南昌","key": "N"},{"name": "南宁","key": "N"},{"name": "南充","key": "N"},{"name": "南平","key": "N"},{"name": "南通","key": "N"},{"name": "南阳","key": "N"},{"name": "那曲","key": "N"},{"name": "内江","key": "N"},{"name": "宁德","key": "N"},{"name": "怒江","key": "N"}]}, {title: "P",item: [{"name": "盘锦","key": "P"},{"name": "攀枝花","key": "P"},{"name": "平顶山","key": "P"},{"name": "平凉","key": "P"},{"name": "萍乡","key": "P"},{"name": "莆田","key": "P"},{"name": "濮阳","key": "P"}]}, {title: "Q",item:[{"name": "青岛","key": "Q"},{"name": "黔东南","key": "Q"},{"name": "黔南","key": "Q"},{"name": "黔西南","key": "Q"},{"name": "庆阳","key": "Q"},{"name": "清远","key": "Q"},{"name": "秦皇岛","key": "Q"},{"name": "钦州","key": "Q"},{"name": "齐齐哈尔","key": "Q"},{"name": "泉州","key": "Q"},{"name": "曲靖","key": "Q"},{"name": "衢州","key": "Q"}]}, {title: "R",item: [{"name": "日喀则","key": "R"},{"name": "日照","key": "R"}]}, {title: "S",item:[{"name": "上海","key": "S"},{"name": "深圳","key": "S"},{"name": "苏州","key": "S"},{"name": "沈阳","key": "S"},{"name": "石家庄","key": "S"},{"name": "三门峡","key": "S"},{"name": "三明","key": "S"},{"name": "三亚","key": "S"},{"name": "商洛","key": "S"},{"name": "商丘","key": "S"},{"name": "上饶","key": "S"},{"name": "山南","key": "S"},{"name": "汕头","key": "S"},{"name": "汕尾","key": "S"},{"name": "韶关","key": "S"},{"name": "绍兴","key": "S"},{"name": "邵阳","key": "S"},{"name": "十堰","key": "S"},{"name": "朔州","key": "S"},{"name": "四平","key": "S"},{"name": "绥化","key": "S"},{"name": "遂宁","key": "S"},{"name": "随州","key": "S"},{"name": "娄底","key": "S"},{"name": "宿迁","key": "S"},{"name": "宿州","key": "S"}]}, {title: "T",item: [{"name": "天津","key": "T"},{"name": "太原","key": "T"},{"name": "泰安","key": "T"},{"name": "泰州","key": "T"},{"name": "唐山","key": "T"},{"name": "天水","key": "T"},{"name": "铁岭","key": "T"},{"name": "铜川","key": "T"},{"name": "通化","key": "T"},{"name": "通辽","key": "T"},{"name": "铜陵","key": "T"},{"name": "铜仁","key": "T"},{"name": "台湾","key": "T"}]}, {title: "W",item: [{"name": "武汉","key": "W"},{"name": "乌鲁木齐","key": "W"},{"name": "无锡","key": "W"},{"name": "威海","key": "W"},{"name": "潍坊","key": "W"},{"name": "文山","key": "W"},{"name": "温州","key": "W"},{"name": "乌海","key": "W"},{"name": "芜湖","key": "W"},{"name": "乌兰察布","key": "W"},{"name": "武威","key": "W"},{"name": "梧州","key": "W"}]}, {title: "X",item: [{"name": "厦门","key": "X"},{"name": "西安","key": "X"},{"name": "西宁","key": "X"},{"name": "襄樊","key": "X"},{"name": "湘潭","key": "X"},{"name": "湘西","key": "X"},{"name": "咸宁","key": "X"},{"name": "咸阳","key": "X"},{"name": "孝感","key": "X"},{"name": "邢台","key": "X"},{"name": "新乡","key": "X"},{"name": "信阳","key": "X"},{"name": "新余","key": "X"},{"name": "忻州","key": "X"},{"name": "西双版纳","key": "X"},{"name": "宣城","key": "X"},{"name": "许昌","key": "X"},{"name": "徐州","key": "X"},{"name": "香港","key": "X"},{"name": "锡林郭勒","key": "X"},{"name": "兴安","key": "X"}]}, {title: "Y",item: [{"name": "银川","key": "Y"},{"name": "雅安","key": "Y"},{"name": "延安","key": "Y"},{"name": "延边","key": "Y"},{"name": "盐城","key": "Y"},{"name": "阳江","key": "Y"},{"name": "阳泉","key": "Y"},{"name": "扬州","key": "Y"},{"name": "烟台","key": "Y"},{"name": "宜宾","key": "Y"},{"name": "宜昌","key": "Y"},{"name": "宜春","key": "Y"},{"name": "营口","key": "Y"},{"name": "益阳","key": "Y"},{"name": "永州","key": "Y"},{"name": "岳阳","key": "Y"},{"name": "榆林","key": "Y"},{"name": "运城","key": "Y"},{"name": "云浮","key": "Y"},{"name": "玉树","key": "Y"},{"name": "玉溪","key": "Y"},{"name": "玉林","key": "Y"}]}, {title: "Z",item: [{"name": "中山","key": "Z"},{"name": "珠海","key": "Z"},{"name": "杂多县","key": "Z"},{"name": "赞皇县","key": "Z"},{"name": "枣强县","key": "Z"},{"name": "枣阳市","key": "Z"},{"name": "枣庄","key": "Z"},{"name": "泽库县","key": "Z"},{"name": "增城市","key": "Z"},{"name": "曾都区","key": "Z"},{"name": "泽普县","key": "Z"},{"name": "泽州县","key": "Z"},{"name": "札达县","key": "Z"},{"name": "扎赉特旗","key": "Z"},{"name": "扎兰屯市","key": "Z"},{"name": "扎鲁特旗","key": "Z"},{"name": "扎囊县","key": "Z"},{"name": "张北县","key": "Z"},{"name": "张店区","key": "Z"},{"name": "章贡区","key": "Z"},{"name": "张家港","key": "Z"},{"name": "张家界","key": "Z"},{"name": "张家口","key": "Z"},{"name": "漳平市","key": "Z"},{"name": "漳浦县","key": "Z"},{"name": "章丘市","key": "Z"},{"name": "樟树市","key": "Z"},{"name": "张湾区","key": "Z"},{"name": "彰武县","key": "Z"},{"name": "漳县","key": "Z"},{"name": "张掖","key": "Z"},{"name": "漳州","key": "Z"},{"name": "长子县","key": "Z"},{"name": "湛河区","key": "Z"},{"name": "湛江","key": "Z"},{"name": "站前区","key": "Z"},{"name": "沾益县","key": "Z"},{"name": "诏安县","key": "Z"},{"name": "召陵区","key": "Z"},{"name": "昭平县","key": "Z"},{"name": "肇庆","key": "Z"},{"name": "昭通","key": "Z"},{"name": "赵县","key": "Z"}]}]module.exports = city;

address组件部分

该组件的wxml，wxss部分，这里就不多讲话了，下面直接给代码吧，这里讲一下js跟config部分。

js这里就两个核心点，1、处理index页面携带进来的数据（即组件初始化数据），2、将选中的城市抛出去，记录历史选中城市。

一、config.wxs

module.exports = {horizontal: true, // 第二个选项是否横排显示（一般第一个数据选项为 热门城市，常用城市之类 ，开启看需求）animation:true ,// 过渡动画是否开启search:true ,// 是否开启搜索history:true ,// 是否开启历史访问城市searchBtn:false ,// 是否存在搜索按钮};

二、address.js

初始数据处理：这里只需将所有城市的json赋值给list便可。

let rightArr = []for (let i in data) {rightArr.push(data[i].title.substr(0, 1));}this.setData({list: data,rightArr})

历史访问数据处理

let detail = e.currentTarget.dataset.detail;this.triggerEvent('detail', detail, myEventOption);if(wx.getStorageSync('historyAddress')){var arr = wx.getStorageSync('historyAddress');for(var i=0;i<arr.length;i++){if(arr[i].name==detail.name){//这里主要将以前访问过的，又重新选中的放到最前面var arr1 = arr[i];var arr2 = arr[0];var arr3 = [];arr3 = arr1; arr[i] = arr[0];arr[0] = arr3;wx.setStorageSync('historyAddress',arr)break;}if(i==arr.length-1){//如果选中的这个城市以前没访问过，这记录下来arr = prepend(arr,detail); wx.setStorageSync('historyAddress',arr);function prepend(arr, item) {//将arr数组复制给avar a = arr.slice(0);//使用unshift方法向a开头添加itema.unshift(item);return a;}break;}}}else{var newArr = [];newArr.push(detail);wx.setStorageSync('historyAddress',newArr)}

搜索：

_search(){console.log("搜索")let data = this.data.data;let newData = [];for (let i = 0; i < data.length; i++) {let itemArr = [];for (let j = 0; j < data[i].item.length; j++) {if (data[i].item[j].name.indexOf(this.value) > -1) {let itemJson = {};for (let k in data[i].item[j]) {itemJson[k] = data[i].item[j][k];}itemArr.push(itemJson);}}if (itemArr.length === 0) {continue;}newData.push({title: data[i].title,type: data[i].type ? data[i].type : "",item: itemArr})}this.resetRight(newData);},

完整js代码

Component({/*** 组件的属性列表*/properties: {data: {type: Object,value: {},observer: function (newVal, oldVal) {this.resetRight(newVal);if(wx.getStorageSync('historyAddress')){this.setData({historyAddress:wx.getStorageSync('historyAddress')})}}},myCity: {type: String,value: "",},// 用于外部组件搜索使用search:{type:String,value:"",observer: function (newVal, oldVal) {console.log(newVal)this.value = newVal;this.searchMt();}}},data: {inputValue: '',list: [],rightArr: [],// 右侧字母展示jumpNum: '',//跳转到那个字母myCityName: '请选择', // 默认我的城市screenHeight:wx.getSystemInfoSync().screenHeight,historyAddress:null,},ready() {let data = this.data.data;this.resetRight(data);if (this.data.myCity) {this.getCity()}},methods: {// 数据重新渲染resetRight(data) {let rightArr = []for (let i in data) {rightArr.push(data[i].title.substr(0, 1));}this.setData({list: data,rightArr})},getCity() {var _this = this;wx.getLocation({type: 'wgs84',success: function (res) {_this.latitude = res.latitude;_this.longitude = res.longitude;console.log(res)}})},// 右侧字母点击事件jumpMt(e) {let jumpNum = e.currentTarget.dataset.id;this.setData({jumpNum:jumpNum});console.log(this.data.jumpNum,'jumpNum')},// 列表点击事件detailMt(e) {let detail = e.currentTarget.dataset.detail;if(e.currentTarget.dataset.mycity){var mycity = {name:detail,key:'我的城市'}detail = mycity}let myEventOption = {bubbles: false,//事件是否冒泡composed: false,//事件是否可以穿越组件边界capturePhase: false //事件是否拥有捕获阶段} // 触发事件的选项this.triggerEvent('detail', detail, myEventOption);console.log(detail,'detail');if(wx.getStorageSync('historyAddress')){var arr = wx.getStorageSync('historyAddress');for(var i=0;i<arr.length;i++){if(arr[i].name==detail.name){var arr1 = arr[i];var arr2 = arr[0];var arr3 = [];arr3 = arr1; arr[i] = arr[0];arr[0] = arr3;wx.setStorageSync('historyAddress',arr)break;}if(i==arr.length-1){// var aa= [// {name:detail.name,key:detail.key}// ];// aa.push(detail)// arr[arr.length] = detail; arr = prepend(arr,detail); wx.setStorageSync('historyAddress',arr);function prepend(arr, item) {//将arr数组复制给avar a = arr.slice(0);//使用unshift方法向a开头添加itema.unshift(item);return a;}break;}}}else{var newArr = [];newArr.push(detail);wx.setStorageSync('historyAddress',newArr)}// wx.setStorageSync('historyAddress',_this.data.myConcern);},// 获取搜索输入内容input(e) {this.value = e.detail.value;this._search();this.setData({inputValue:e.detail.value})},clear() {this.value = '';this.setData({inputValue:''})this._search();},// 基础搜索功能searchMt() {this._search();},_search(){console.log("搜索")let data = this.data.data;let newData = [];for (let i = 0; i < data.length; i++) {let itemArr = [];for (let j = 0; j < data[i].item.length; j++) {if (data[i].item[j].name.indexOf(this.value) > -1) {let itemJson = {};for (let k in data[i].item[j]) {itemJson[k] = data[i].item[j][k];}itemArr.push(itemJson);}}if (itemArr.length === 0) {continue;}newData.push({title: data[i].title,type: data[i].type ? data[i].type : "",item: itemArr})}this.resetRight(newData);},// 城市定位locationMt() {// 定位自己的城市，需要引入第三方api}}})

`wxml，这部分包括，城市搜索，我的城市，历史访问城市，热门城市推荐，城市字母选择，城市列表。其中搜索，历史访问城市，热门城市以及过度动画是否开启，这些都做在config.wxs中。

<wxs src="config.wxs" module="config" /><view class='list-warpper'><view wx:if="{{config.search}}" class='list-search'><view class='list-search-box'><icon type="search" size="15" color="#d1dbf6" /><input placeholder-style="color:white;font-size:30rpx;" placeholder="输入您要搜索的城市" bindinput='input' value="{{inputValue}}"/><icon bindtap="clear" type="clear" size="15" color="#d1dbf6" /></view><button wx:if="{{config.searchBtn}}" class='search-button' catchtap='searchMt'>搜索</button></view><block wx:if="{{list.length != 0 }}"><scroll-view style="height: {{screenHeight*0.95}}px;" class="list-scroll {{config.search?'top':''}}" scroll-y="true" scroll-into-view="{{jumpNum}}" scroll-with-animation="{{config.animation}}"><view class="line-h30" style=""></view><!-- 我的位置 --><view wx:if="{{myCity}}"><view class='list-horizontal myaddress'><view class="wh40" style=""><image class="wh100" mode="aspectFit" src="/image/address.png"></image></view><view class='myaddressText' data-detail="{{myCity}}" data-mycity='1' catchtap='detailMt'>{{myCity}}</view><view class="mt14">GPS定位</view></view></view><!-- 历史访问城市 --><view wx:if="{{historyAddress&&config.history}}"><view class='list-title'>历史访问城市</view><view class='list-horizontal'><view class='list-name border' wx:for="{{historyAddress}}" wx:for-item="history" wx:for-index="idx" wx:key="history" data-detail="{{history}}" catchtap='detailMt'>{{history.name}}</view></view></view><!-- 热门搜索&所有城市 --><view id="{{'index'+index}}" wx:for="{{list}}" wx:key="key"><view class='list-title'>{{item.title}}</view><view class='{{index===0&&config.horizontal&&item.type==="hot"?"list-horizontal":""}}'><view class='list-name {{idx === 0 ?"":"border"}}' wx:for="{{item.item}}" wx:for-item="city" wx:for-index="idx" wx:key="city" data-detail="{{city}}" catchtap='detailMt'>{{city.name}}</view></view><view wx:if="{{index===0}}" class="line-h30"></view></view></scroll-view><view class='list-right-wrapper'><view class='right-item' wx:for="{{rightArr}}" wx:key="rightArr" data-id="{{'index'+index}}" catchtap='jumpMt'>{{rightArr[index]}}</view></view></block><block wx:else><view class='nodata'>暂无更多数据</view></block></view>

wxss部分

page{height:100%;width:100%;}.wh100{width:100%;height:100%;}.list-warpper {position: relative;width: 100%;height: 100%;box-sizing: border-box;}.list-scroll {width: 100%;height: 100%;box-sizing: border-box;}.list-scroll.top{padding-top: 90rpx;}/* 样式控制 */.list-title {background: #fff;color: #999;font-size: 28rpx;padding: 10rpx;padding-left: 30rpx;padding-top: 15rpx;}.list-name {position: relative;font-size: 28rpx;padding: 30rpx;padding-left: 30rpx;color: #444;}.list-name.border::after {content: "";position: absolute;left: 30rpx;right: 0;top: 0;height: 1px;background: #f5f5f5;}.list-right-wrapper {position: fixed;top: 12%;right: 2rpx;padding: 10rpx;border-radius: 20rpx;z-index: 2;height: 80%;overflow: auto;/* background: #ddd; */}.right-item {display: flex;justify-content: center;align-items: center;padding: 2rpx 10rpx;font-size: 25rpx;color: #666;}.list-search {position: absolute;top: 0;left: 0;display: flex;align-items: center;width: 100%;/* height: 90rpx; */padding: 10rpx 30rpx;box-sizing: border-box;z-index: 20;background: #3e67d9;padding-bottom: 20rpx;}.search-title {flex-shrink: 0;font-size: 28rpx;padding-right: 10rpx;}.list-search-box {display: flex;align-items: center;padding: 0 30rpx;width: 100%;height: 70rpx;background: #6585e1;border-radius: 90rpx;font-size: 28rpx;box-sizing: border-box;}.list-search-box input {width: 100%;padding-left: 10rpx;color: white;}.search-button {/* width: 100rpx; */flex-shrink: 0;height: 60rpx;line-height: 60rpx;font-size: 28rpx;margin-left: 10rpx;color:white;}/* 热门城市横排显示样式 */.list-horizontal {display: flex;flex-wrap: wrap;padding: 10rpx 30rpx;padding-right: 50rpx;align-items:center;}.list-horizontal .list-name{border:1rpx #ddd solid;border-radius:5rpx;margin-right:3%;width:29%;text-align:center;padding:15rpx 0;margin-bottom:25rpx;font-size:30rpx;color:#333;position: static;}/* 无数据 */.nodata {padding-top: 200rpx;text-align: center;font-size: 32rpx;color: #ddd;}.wh40{width: 40rpx;height: 40rpx;}.myaddress{padding: 20rpx 0;margin: 0 30rpx;border-bottom: 1rpx solid #eee;font-size: 30rpx;color: #999;}.line-h30{width: 100%;height: 30rpx;background: #f7f7f7;}.myaddressText{font-size: 40rpx;color: #000;margin: 0 15rpx;}.mt14{margin-top:14rpx;}