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

实现搜索城市功能

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

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

您可能感兴趣的文章:

• mpvue微信小程序多列选择器用法之省份城市选择的实现
• 小程序自定义组件实现城市选择功能
• 微信小程序仿美团城市选择
• 详解微信小程序开发之城市选择器 城市切换