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

实现搜索城市功能

参考 微信小程序 之『仿美团城市选择 城市切换』
https://github.com/cinoliu/-selectCity

js文件

// pages/address/address.js
var 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' 
  })
 },
})

wxml文件

<!--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>

wxss文件

/* 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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。