android editext 首字母检索城市,微信小程序实现按首字母检索城市列表

Box{

height:100%;

background: #fff;

display: flex;

}

.city_left{

flex: 1;

}

.city_right{

width: 60rpx;

display: flex;

flex-direction: column;

justify-content: space-around;

}

.letter_item{

flex: 1;

display: block;

font-size: 24rpx;

color: #33B9FF;

text-align: center;

}

.city_locate,.national{

height: 80rpx;

line-height: 80rpx;

border-bottom: 1px solid #efefef;

font-size: 28rpx;

color: #333;

padding-left: 25rpx;

}

.city_locate_title{

color: #999;

margin-right: 20rpx;

}

.new_city{

background: #efefef;

font-size: 28rpx;

}

.new_city_title{

line-height: 50rpx;

color: #999;

padding-left: 25rpx;

margin-bottom: 20rpx;

}

.new_city_Box{

display: flex;

flex-wrap: wrap;

}

.new_city_text{

width: 200rpx;

text-align: center;

line-height: 70rpx;

background: #fff;

border-radius: 35rpx;

margin:0 0 22rpx 22rpx;

}

.city_first_letter{

line-height: 40rpx;

height: 40rpx;

padding-left: 25rpx;

font-size: 28rpx;

background: #eee;

color: #999;

}

.city_name{

display: block;

line-height: 80rpx;

height: 80rpx;

border-bottom: 1px solid #efefef;

font-size: 28rpx;

color: #333;

padding-left: 25rpx;

}

文件，因为我这里是组件，所以是下面这样，如果你不是的组件，那么不要这句1800000)){

{

微信小程序sdk获取当前经纬度的详情信息，然后取到当前城市，这是腾讯地图微信小程序JavaScript SDK，可以去查看教程，这里用到的是地址解析功能；获取定位信息getLocateInfo(){

let that=this;return new Promise(function (resolve, reject) {

that.location().then(function(val){//如果通过授权，那么直接使用腾讯的微信小程序sdk获取当前定位城市qqwxmap.reverseGeocoder({

location: {

latitude: val.latitude,

longitude: val.longitude

},

success: function (res) {

console.log(res.result.address_component.city);

resolve(res.result.address_component.city);//返回城市},

fail: function (res) {

reject(res);

},

complete: function (res) {

console.log(res);

}

});

},function(error) {//如果用户拒绝了授权，那么这里会提醒他，去授权后再定位

console.log('shibai');

wx.showModal({

title: '',

content: '自动定位需要授权地理定位选项',

confirmText: '去授权',

success(res) {if (res.confirm) {

wx.openSetting({

success(res) {

console.log(res);

that.getLocateInfo();

}

})

}

}

})

})

})

}

//定位，获取当前经纬度location(){

return new Promise(function (resolve, reject) {

wx.getLocation({

altitude: true,

success: function (res) {

resolve(res);

},fail(res){

reject(res);

}

})

});

}

}

页面的json文件里要添加这一句然后在引用的wxml界面添加组件，styles是设置的组件的变量，我这里是可以改变组件最外层的样式，bindcitytap是上面组件js里的点击城市方法里提到的事件

然后在引用的界面的js里，写个cityTap事件，获取传过来的值页面里面，需要改一下

首先wxml里面去掉圈起来的这句

添加1800000)) {//每隔30分钟请求一次定位

this.getLocate();

} else {//如果未满30分钟，那么直接从本地缓存里取值that.setData({

locateCity: cityOrTime.city

})

}

}

})

微信小程序实现按首字母检索城市列表的代码全部内容，希望对你开发微信小程序有所帮助。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！