这篇文章给大家分享的是有关微信小程序如何实现城市选择及搜索功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
昌都网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
实现搜索城市功能
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文件
