欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-17 08:57:22
实现搜索城市功能 参考 微信小程序 之『仿美团城市选择 城市切换』 https://github.com/cinoliu/-selectcity js文件...

实现搜索城市功能

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

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