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

不说废话，上效果图



因为我有多处要用到，所以我这里是写成自定义组件的，你也可以直接改成在page页面编写：

布局左边一个scroll-view，显示城市列表,右边一个view显示字母列表，城市列表这边有首字母显示，给这个添加这个字母的ID，然后给右边的26个字母添加点击事件，点击的时候获取到点击的是哪个字母，给scroll-view的scroll-into-view赋值相应的字母，它左边就可以跳到相应的地方，再给scroll-view 加一个scroll-with-animation，让它跳转的时候有动画效果；

首先，我们来看看wxml

<view class='city_box' style='{{styles}}'>
<view class='city_left'>
<scroll-view scroll-y style='width:100%;height:100%;' scroll-with-animation scroll-into-view='{{cityListId}}'>
<view class='city_locate' data-types='locate' catchtap='cityTap'>
<text class='city_locate_title'>自动定位</text>
<text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text>
</view>
<view class='national' data-types='national' catchtap='cityTap'>全国</view>
<view class='new_city'>
<view class='new_city_title'>热门城市</view>
<view class='new_city_box'>
<text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
</view>
</view>
<view class='city_list_box'>
<block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
<view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
<text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
</block>
</view>
</scroll-view>
</view>
<view class='city_right'>
<text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
</view>
</view>

然后wxss

.city_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;
}

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

{
"component": true
}

最后JS，因为我这里是写的一个组件，所以是Component而不是Page

import qqmap from '../../utils/map.js';
Component({
properties: {
styles:{//这个是可以自定义最外层的view的样式
type:String,
value:'',
observer: function (newval, oldval) {
// 监听改变
console.log(newval, oldval);
}
}
},
data: {
//下面是字母排序
letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
cityListId: '',
//下面是城市列表信息，这里只是模拟数据
citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "cityName": "巴中" }, { "id": "v4", "cityName": "包头" }, { "id": "v1", "cityName": "北京" }] }, { "letter": "C", "data": [{ "id": "v15", "cityName": "成都" }] }, { "letter": "D", "data": [{ "id": "v21", "cityName": "稻城" }] }, { "letter": "G", "data": [{ "id": "v17", "cityName": "广州" }, { "id": "v29", "cityName": "桂林" }] }, { "letter": "H", "data": [{ "id": "v9", "cityName": "海南" }, { "id": "v3", "cityName": "呼和浩特" }] }, { "letter": "L", "data": [{ "id": "v24", "cityName": "洛阳" }, { "id": "v20", "cityName": "拉萨" }, { "id": "v14", "cityName": "丽江" }] }, { "letter": "M", "data": [{ "id": "v13", "cityName": "眉山" }] }, { "letter": "N", "data": [{ "id": "v27", "cityName": "南京" }] }, { "letter": "S", "data": [{ "id": "v18", "cityName": "三亚" }, { "id": "v2", "cityName": "上海" }] }, { "letter": "T", "data": [{ "id": "v5", "cityName": "天津" }] }, { "letter": "W", "data": [{ "id": "v12", "cityName": "乌鲁木齐" }, { "id": "v25", "cityName": "武汉" }] }, { "letter": "X", "data": [{ "id": "v23", "cityName": "西安" }, { "id": "v28", "cityName": "香港" }, { "id": "v19", "cityName": "厦门" }] }, { "letter": "Z", "data": [{ "id": "v8", "cityName": "张家口" }] }],
//下面是热门城市数据，模拟数据
newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
// citySel: '全国',
locateCity: ''
},
methods: {
//点击城市
cityTap(e) {
const val = e.currentTarget.dataset.val || '',
types = e.currentTarget.dataset.types || '',
Index = e.currentTarget.dataset.index || '',
that=this;
let city = this.data.citySel;
switch (types) {
case 'locate':
//定位内容
city = this.data.locateCity;
break;
case 'national':
//全国
city = '全国';
break;
case 'new':
//热门城市
city = val;
break;
case 'list':
//城市列表
city = val.cityName;
break;
}
if(city){
wx.setStorage({
key: 'city',
data: city
})
　　　　//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
this.triggerEvent('citytap', { cityname: city });
}else{
console.log('还没有');
this.getLocate();
}

},
//点击城市字母
letterTap(e) {
const Item = e.currentTarget.dataset.item;
this.setData({
cityListId: Item
});
console.log(this.data.cityListId);
},
//调用定位
getLocate(){
let that=this;
new qqmap().getLocateInfo().then(function (val) {//这个方法在另一个文件里，下面有贴出代码
console.log(val);
if (val.indexOf('市') !== -1) {//这里是去掉“市”这个字
console.log(val.indexOf('市') - 1);
val = val.slice(0, val.indexOf('市'));
console.log(val);
}
that.setData({
locateCity: val
});
//把获取的定位和获取的时间放到本地存储
wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
});
}
},
ready(){
console.log(getApp());
let that = this,
cityOrTime = wx.getStorageSync('locatecity')||{},
time = new Date().getTime(),
city='';
if (!cityOrTime.time||(time - cityOrTime.time > 1800000)){//每隔30分钟请求一次定位
this.getLocate();
}else{//如果未满30分钟，那么直接从本地缓存里取值
that.setData({
locateCity: cityOrTime.city
})
}

}
})

然后是引用的map.js，这里需要用到腾讯地图的微信小程序sdk获取当前经纬度的详情信息，然后取到当前城市，这是腾讯地图微信小程序JavaScript SDK，可以去查看教程，这里用到的是地址解析功能；

const wxqqmap = require('../libs/qqmap-wx-jssdk.min.js'),
qqwxmap = new wxqqmap({
key: 'GTDBZ-WFSRX-JOT4W-7WYBD-Z2CTO-7QBEM' // 必填，这里最好填自己申请的的
});
import util from './util.js';
const qq='sdfsdf';
export default class qqmap{//获取定位信息
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文件里要添加这一句

{
"usingComponents":{
"citylist":"../../component/cityListCom/cityListCom"
}
}

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

<citylist styles='max-height:100%;' bindcitytap='cityTap'></citylist>

然后在引用的界面的js里，写个cityTap事件，获取传过来的值

// pages/cityList/cityList.js
Page({
data: {
winHeight:0
},
//监听传值，后面自己做处理了
cityTap(e){
console.log('fasdfsdfsdfds');
console.log(e);
const cityName=e.detail.cityname;
wx.navigateBack();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const win = wx.getSystemInfoSync();
console.log(win);
this.setData({
winHeight: win.windowHeight
});
}
})

这样就可以了，完结。

想了解更多的小程序的知识请添加微信小程序开发交流群：368506119