微信小程序城市选择及搜索功能的方法

// pages/address/address.jsvar app = getApp()Page({ data: {  searchLetter: [],  showLetter: "",  winHeight: 0,  cityList: [],  isShowLetter: false,  scrollTop: 0,//置顶高度  scrollTopId: '',//置顶id  city: "",  cityList_search:[],  address_show:false,  search_city:[],  is_data:true,  empty:'', }, onLoad: function (options) {  console.log(options.currentcity)    // 生命周期函数--监听页面加载  let that = this;  that.setData({   city: options.currentcity  })  var searchLetter = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"];  new Promise(function (resolve) {   that.getCity(function (data) {    console.log(data)    let cityObj = data.cityList;    var tempObj = [];    for (var i = 0; i < searchLetter.length; i++) {     var initial = searchLetter[i];     var cityInfo = [];     var tempArr = {};     tempArr.initial = initial;     for (var j = 0; j < cityObj.length; j++) {      if (initial == cityObj[j].initial) {       cityInfo.push(cityObj[j]);      }     }     tempArr.cityInfo = cityInfo;     tempObj.push(tempArr);    }    console.log(tempObj)    that.setData({     cityList: tempObj    })    resolve(tempObj);    })     }).then(function(res){   console.log(res)   let cityObj = [];   var sysInfo = wx.getSystemInfoSync();   var winHeight = sysInfo.windowHeight;   var itemH = winHeight / searchLetter.length;   var tempObj = [];   for (var i = 0; i < searchLetter.length; i++) {    var temp = {};    temp.name = searchLetter[i];    temp.tHeight = i * itemH;    temp.bHeight = (i + 1) * itemH;    tempObj.push(temp)   }   that.setData({    winHeight: winHeight,    itemH: itemH,    searchLetter: tempObj,   })    }) }, getCity: function (callBack){  let that = this;  app.commonRequest('wxapp/public/getCityList', 'POST', {}, function (data) {    console.log(data);     if (data.status == '200') {      that.setData({       cityList: data.datainfo.list,       // city: data.datainfo.getcode,           })      callBack({       cityList: data.datainfo.list      })     } else {      callBack({       cityList: data.datainfo.list      })     }  }) }, set_current_city:function(set_city,callBack){  let that = this;  app.commonRequest('wxapp/public/getCityList', 'POST', {   area_name: set_city,   cityCheckType:1,  }, function (data) {   console.log(data)   if (data.status == "200") {    callBack({     data: data    })   }else {    callBack({     data: data    })   }  })   }, search_city:function(e){  let that =this;  that.setData({   address_show:true  }) }, cancel_city:function(e){  let that = this;  that.setData({   search_city:[],   address_show: false,   empty:'',  }) }, seacrch_city:function(e){  let that =this;  let search_val = e.detail.value;  console.log(search_val);  app.commonRequest('wxapp/public/getCityList', 'POST', {   area_name: search_val  }, function (data) {   console.log(data)   if(data.status == "200"){    if (data.datainfo.list.length >0){     that.setData({      search_city: data.datainfo.list,      is_data: true     })    }    else{     that.setData({      search_city: data.datainfo.list,      is_data:false     })    }   }     })     }, clickLetter: function (e) {  console.log(e.currentTarget.dataset.letter)  var showLetter = e.currentTarget.dataset.letter;  this.setData({   showLetter: showLetter,   isShowLetter: true,   scrollTopId: showLetter,  })  var that = this;  setTimeout(function () {   that.setData({    isShowLetter: false   })  }, 1000) }, //选择城市 bindCity: function (e) {  let that = this;  console.log("bindCity");  that.set_current_city(e.currentTarget.dataset.city,function(data){   console.log(data)  });  wx.setStorageSync('currentcity', e.currentTarget.dataset.city)  // that.onLoad();  this.setData({   city: e.currentTarget.dataset.city,   // scrollTop: 0,   })　　// 回到首页  wx.switchTab({   url: '/pages/index/index'   }) },})

<!--pages/address/address.wxml--><view class="searchLetter touchClass"> <view class="thishotText" bindtap="hotCity">  <view style="margin-top:0;">当前</view>  <!-- <view style="margin-top:0;">热门</view> --> </view> <view wx:for="{{searchLetter}}" style="color:#53985F;font-size:20rpx;" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter" >{{item.name}}</view></view><block wx:if="{{isShowLetter}}"> <view class="showSlectedLetter">  {{showLetter}} </view></block><scroll-view scroll-y="true" style="height:{{winHeight}}px"  scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}"> <view class='searchbox'>   <view class='input_box'>    <image class='search' src='/images/search.png'></image>    <input placeholder='城市' onchange="seacrch_city" oninput="seacrch_city" onblur="seacrch_city" value='{{empty}}' bindtap='search_city'></input>    <view class='close' bindtap='cancel_city'>×</view>   </view>   <view class='cancel' bindtap='cancel_city'>取消</view>  </view> <view id='address' hidden='{{address_show}}'>  <view class='current_city li_style'>当前：{{city}}</view>  <view class='all_city'>   <view class='li_style'>所有城市</view>    </view>   <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">   <view class="item_letter" id="{{item.initial}}">{{item.initial}}</view>   <view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.area_code}}" data-city="{{ct.area_name}}" bindtap="bindCity">    {{ct.area_name}}   </view>  </view> </view> <view id='address_search' hidden='{{!address_show}}'>    <view>   <view class="item_city" wx:for="{{search_city}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.area_code}}" data-city="{{ct.area_name}}" bindtap="bindCity">    {{ct.area_name}}   </view>   <view class='noData' hidden='{{is_data}}'>暂无数据</view>  </view> </view></scroll-view>

/* pages/address/address.wxss */.searchbox{ overflow: hidden; margin: 0 20rpx;}.search{ width: 20px; height: 20px; float: left; margin:7rpx 10rpx;}.input_box{ width: 630rpx; height: 50rpx; background: #efefef; border-radius: 30rpx; float: left;}.input_box input{ font-size: 25rpx; width: 450rpx; float: left;}.input_box .close{ width:30rpx; height:30rpx; background:#aaa; color:#fff; border-radius:50%; float:right; margin-right:20rpx; margin-top:10rpx; line-height:27rpx; font-size:30rpx; text-align:center;}.searchbox .cancel{ font-size: 25rpx; color: #53985F; width: 80rpx; text-align: right; float: right; line-height: 50rpx;}.current_city{ border-bottom: 1rpx solid #eee; }.li_style{ height: 50rpx; padding: 20rpx 0; width: 710rpx; line-height: 50rpx; font-size: 29rpx; margin:0 20rpx;}.searchLetter { position: fixed; right: 0; width: 50rpx; text-align: center; justify-content: center; display: flex; flex-direction: column; color: #666; z-index: 1;}.searchLetter view { margin-top: 20rpx;}.touchClass { background-color: #fff; color: #fff; top: 100rpx;}.showSlectedLetter { background-color: rgba(0, 0, 0, 0.5); color: #fff; display: flex; justify-content: center; align-items: center; position: fixed; top: 50%; left: 50%; margin: -100rpx; width: 200rpx; height: 200rpx; border-radius: 20rpx; font-size: 52rpx; z-index: 1;}.selection { display: flex; width: 100%; flex-direction: column; margin-top: 10rpx;}.item_letter { display: flex; background-color: #f5f5f5; height: 50rpx; padding-left: 34rpx; align-items: center; font-size: 24rpx; color: #666;}.item_city { display: flex; background-color: #fff; height: 100rpx; padding-left: 34rpx; align-items: center; border-bottom: 1rpx solid #ededed; font-size: 24rpx; color: #666;}.hotcity-common { font-size: 24rpx; color: #666; padding: 0 0 0 30rpx;}.thisCity { padding-top: 30rpx;}.thisCityName { display: inline-block; border: 1rpx solid #2ab4ff; border-radius: 8rpx; padding: 10rpx 0; font-size: 24rpx; color: #2ab4ff; text-align: center; min-width: 149.5rpx; margin: 20rpx 0 20rpx 30rpx;}.thishotText { color: #53985F; font-size: 20rpx; margin: 0 !important;}.slectCity { border-color: #2ab4ff !important;}.slectCity view { color: #2ab4ff !important;}.weui-grid { position: relative; float: left; padding: 10rpx 0; width: 149.5rpx; box-sizing: border-box; border: 1rpx solid #ececec; border-radius: 8rpx; margin: 10rpx 12rpx;}.weui-grid__label { display: block; text-align: center; color: #333; font-size: 24rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}.noData{ text-align: center; font-size: 30rpx; color: #aaa; line-height: 60rpx;}