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

实现搜索城市功能

参考 微信小程序 之『仿美团城市选择 城市切换』
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;
}

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