uniapp之地址定位选择，根据字母排序

view

<template>
	<view class="address-wrap" id="address">
		<!-- 搜索输入框-start -->
		<view class="search-wrap" :style="{top:windowTop+'px'}">
			<view class="searchInfor-input">
				<text class="iconfont search-icon">&#xe69b;</text>
				<input type="text" confirm-type="search" class="searchInfor-text" @input="searchInputHandle" @confirm="searchConfirmHandle" placeholder="输入国内城市/区域查询" placeholder-style="color:#fff" />
			</view>
		</view>
		<view style="height: 32px;"></view>
		<!-- 搜索输入框-end -->
		<template v-if="!isSearch">
			<!-- 城市列表-start -->
			<view class="address-scroll">
				<!-- 当前城市 -->
				<view class="address-currentcity" id="start">
					<view class="address-currentcity-title">当前城市</view>
					<view class="address-currentcity-name">
						<text class="iconfont">&#xe69f;</text>
						<text style="margin-left: 8.5px;">上海</text>
					</view>
				</view>
				<!-- 选择城市 -->
				<view class="address-choosecity">
					<view class="address-choosecity-title">选择城市</view>
					<view class="address-choosecity-con">
						<template v-for="(item,index) in CityList">
							<view class="address-choosecity-item" :key="index" :id="index">
								<view class="choosecity-item-title">{{index}}</view>
								<template v-for="value in item">
								  <view class="choosecity-item-li" :key="value.name" @click="chooseCityHandle(value)">{{value.name}}</view>
								</template>
							</view>
						</template>
					</view>
				</view>
				
			</view>
			<!-- 城市列表-end -->
			<!-- 对应字母 -->
			<view class="address-letter">
				<view class="address-letter-item" @click="scrollHandle('start')">
					<text class="iconfont">&#xe69f;</text>
				</view>
				<template v-for="(item,index) in CityList">
				   <view class="address-letter-item" :key="index" @click="scrollHandle(index)">{{index}}</view>
				</template>
			</view>
		</template>
		<!-- 搜索 -->
		<template v-else>
			<view class="search-content">
				<block v-if="searchTotalList.length>0">
				   <view class="search-con-item" v-for="item in searchTotalList" :key="item.code" @click="chooseCityHandle(item)">{{item.name}}</view>
				</block>
				<block v-else>
					<view class="search-total">无结果</view>
				</block>
				
			</view>
		</template>
	</view>
</template>

script

引入Pinyin-pro组件把汉族转换成拼音
npm install pinyin-pro
cityData.js==>本地城市数据（博客资源中有文件）

<script>
	import utils from '../../common/js/utils.js'
	import { pinyin } from 'pinyin-pro';
	import cityData from "../common/js/cityData.js"
	export default {
		data() {
			return {
				cityData:cityData.cityData(),
				searchVal:'',
				SearchList:[],//查询数组
				CityList:{},//根据拼音排序的城市数据
				windowTop:0,
				isSearch:false,//是否显示搜索内容，默认：false
				searchTotalList:[],//搜索结果
			};
		},
		onLoad() {
			this.dealwithCityData();
		},
		onShow() {
			//获取手机系统信息
			const systemInfo=uni.getSystemInfoSync();
			console.log("[systemInfo]",systemInfo)
			// #ifdef H5 || APP-PLUS || MP-ALIPAY
			this.windowTop=systemInfo.windowTop
			// #endif
		},
		methods:{
			//处理城市数据
			dealwithCityData(){
				let tempCityList={};//临时城市数据
				const cityData=this.cityData;
				for(let i=0;i<cityData.length;i++){
					if(tempCityList[cityData[i].name]==undefined){
						tempCityList[cityData[i].name]=[];
					}
					tempCityList[cityData[i].name].push({
						code:cityData[i].code,
						name:cityData[i].name
					})
					let cityList=cityData[i].cityList;
					if(cityList&&cityList.length>0){
						for(let j=0;j<cityList.length;j++){
							if(tempCityList[cityList[j].name]==undefined){
								tempCityList[cityList[j].name]=[]
							}
							tempCityList[cityList[j].name].push({
								code:cityList[j].code,
								name:cityList[j].name
							})
							let areaList=cityList[j].areaList;
							if(areaList&&areaList.length>0){
								for(let t=0;t<areaList.length;t++){
									if(tempCityList[areaList[t].name]==undefined){
										tempCityList[areaList[t].name]=[]
									}
									tempCityList[areaList[t].name].push({
										code:areaList[t].code,
										name:areaList[t].name
									})
								}
							}
						}
					}
				}
				//把数据转换成拼音
				let tempPinYinList={};//临时拼音数据
				for(let i in tempCityList){
					let py=pinyin(i.substring(0,1), { pattern: 'first', toneType: 'none' }).toUpperCase();
					if(tempPinYinList[py]==undefined){
						tempPinYinList[py]=[];
					}
					tempPinYinList[py].push(tempCityList[i][0])
				}
				//对数据进行排序
				this.CityList=this.objKeySort(tempPinYinList);
				//生成查询数组
				let tempSearchList=[];
				for(let i in this.CityList){
					for(let j=0;j<this.CityList[i].length;j++){
						tempSearchList.push(this.CityList[i][j])
					}
				}
				this.SearchList=tempSearchList;
			},
			objKeySort(obj) {
				//排序的函数
			    var newkey = Object.keys(obj).sort();
			　　//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
			    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
			    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
			        newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
			    }
			    return newObj;//返回排好序的新对象
			},
			//搜索
			searchInputHandle(e){
				let value=utils.trim(e.detail.value);
				if(value.length>0){
					this.isSearch=true
					this.searchHandle(value);
				}else{
					this.isSearch=false
				}
				
			},
			searchConfirmHandle(e){
				let value=utils.trim(e.detail.value);
				if(value.length>0){
					this.isSearch=true
					this.searchHandle(value);
				}else{
					this.isSearch=false
				}
			},
			searchHandle(keyWord){
			    const SearchList=this.SearchList;
				let tempSearchTotal=[];
				SearchList.forEach((value,index)=>{
					if(value.name.indexOf(keyWord)!=-1){
						tempSearchTotal.push(value)
					}
				})
				this.searchTotalList=tempSearchTotal;
			},
			//点击字母滚动事件
			scrollHandle(index){
				const query = uni.createSelectorQuery().in(this);
				uni.createSelectorQuery().select("#address").boundingClientRect(data=>{
				　　uni.createSelectorQuery().select("#"+index).boundingClientRect((res)=>{
				　　　　uni.pageScrollTo({
				　　　　　　duration:100,
				　　　　　　scrollTop:res.top - data.top - 12,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				　　　　})
				　　}).exec()
				}).exec();
			},
			//选择城市
			chooseCityHandle(params){
				this.$store.dispatch("user/getPositionAddress",params)
				uni.switchTab({
					url:'../../pages/game/index'
				})
			}
			
		}
	}
</script>

style

<style lang="scss" scoped>
.address-wrap{
	width: 91.47%;
	margin: 12px auto;
	display: flex;
	flex-direction: column;
	// 搜索输入框
	.search-wrap{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 3;
		background-color: #0A0E1D;
		.searchInfor-input{
			border-radius:16px;
			width:91.47%;
			height: 32px;
			display: flex;
			flex-direction: row;
			background: #252841;
			align-items: center;
			font-size: 14px;
			color: #FFFFFF;
			margin: auto;
			.search-icon{
				margin-left: 14.5px;
			}
			.searchInfor-text{
				height: 100%;
				flex: 1;
				margin: 0 16px 0 8px;
				font-weight: 400;
			}
		}
	}
	
	//城市筛选区
	.address-scroll{
		display: flex;
		flex-direction: column;
		.address-currentcity{
			display: flex;
			flex-direction: column;
			.address-currentcity-title{
				font-size: 15px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-top: 15.5px;
			}
			.address-currentcity-name{
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FEFEFE;
				margin-top: 20px;
			}
		}
		//选择城市
		.address-choosecity{
			display: flex;
			flex-direction: column;
			.address-choosecity-title{
				font-size: 15px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-top: 15.5px;
			}
			.address-choosecity-con{
				display: flex;
				flex-direction: column;
				.address-choosecity-item{
					display: flex;
					flex-direction: column;
					.choosecity-item-title{
						font-size: 15px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 18.5px;
					}
					.choosecity-item-li{
						font-size: 14px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FEFEFE;
						margin-top: 22.5px;
					}
				}
			}
		}
		
	}
	//字母
	.address-letter{
		position: fixed;
		top: 100px;
		right: 17.5px;
		display: flex;
		flex-direction: column;
		z-index: 10;
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		align-items: center;
		.address-letter-item{
			margin-bottom: 3px;
		}
	}
	.search-content{
		display: flex;
		flex-direction: column;
		margin-top: 12px;
		margin-bottom: 12px;
		.search-con-item{
			border-bottom: 1px solid rgba(254, 254, 254, .2);
			height: 35px;
			line-height: 35px;
			font-size: 14px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
		}
		.search-total{
			height: 100px;
			display: flex;
			font-size: 14px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>