uniapp 选择城市 根据城市首字母分类排序

 selectCity.vue

<template>
    <view class="select-city">
        <view class="search">
            <van-field class="select-input" input-align="left" :value="searchVal" placeholder="输入城市名或拼音查询" @change='onselectChange($event)'/>
            <image class="search-ico" src="../../static/icon.png" mode=""></image>
        </view>
        <scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
            <view class="hotcity" id="ScrollTop">
                <view class="hotcity-title">
                    北京 <view class="hotcity-gps">GPS定位</view>
                </view>
                <view class="hotcity-cont">
                    <view class="hotcity-name">国内热门城市</view>
                    <view class="hotcity-menus">
                        <view class="hotcity-item" v-for="(item,index) in HotCity" :key='index' @tap="checkItem(item)">{{item}}</view>
                    </view>
                </view>
            </view>
            <view class="divider"></view>
            <view class="citycont" v-for="(item,index) in CityList" :key="index">
                <view class="city-letter" :id="item.idx">{{item.idx}}</view>
                <view class="city-item" @tap="checkItem(item_city.name)" v-for="(item_city,name_index) in item.cities" :key="name_index">{{item_city.name}}</view>
            </view>
        </scroll-view>
        
        <view class="city-letter-position">
            <view class="city-letter-rm" @tap="getLetter('ScrollTop')">热门</view>
            <view class="city-letter-ite" v-for="(item,index) in LatterName" :key="index" @tap="getLetter(item)"  :style="{'color': LetterId === item ? '#4662D9' : '#000' }">{{item}}</view>
        </view>
    </view>
</template>

<script>
import PinyinUtils from '@/common/pinyin/pingyinUtils.js'
import citys from '@/common/city.js'
export default{
    data(){
        return{
            searchVal:'',
            HotCity: ['北京', '深圳', '上海', '成都', '广州', '重庆'],
            LatterName: citys.data.hostCity,
            CityList: citys.data.cityList, //引用js数据
            LetterId: '',
        }
    },
    onl oad(){
        //let firs = PinyinUtils.chineseToPinYinFirst(this.citys)[0]
        //console.log( firs)
        console.log(citys,'cityList')
    },
    methods:{
        onselectChange(event){
            console.log(event.detail);
            this.searchVal = event.detail
        },
        checkItem(item){
            uni.$emit('checkCity',item)
            uni.navigateBack({
                delta: 1
            })
        },
        getLetter(name) {
            console.log(name,'0000')
            this.LetterId = name
        },
    }
}
</script>

<style scoped lang="scss">
.ynq-ScrollView {
    height: calc(100vh - 160rpx);
}

.select-city{
    .search {
        height: 80rpx;
        background-color: #e1e1e1;
        padding-top: 10rpx;
        margin: 0 20rpx;
        position: relative;
        .select-input{
            width: 86%;
            height: 65rpx;
            padding-left: 30rpx;
            margin: auto;
            overflow: hidden;
            background-color: #fff;
            border-radius: 38rpx;
            display: flex;
            align-items: center;
        }
        .search-ico{
            width: 35rpx;
            height: 35rpx;
            position: absolute;
            top: 26rpx;
            left: 54rpx;
        }
    }
    .hotcity{
        margin: 0 20rpx;
        .hotcity-title{
            height: 65rpx;
            line-height: 65rpx;
            font-size: 32rpx;
            font-weight: 600;
            display: flex;
            border-bottom: 1px solid #ccc;
            .hotcity-gps{
                font-size: 28rpx;
                color: #ccc;
                margin: 10rpx 0 0 12rpx;
            }
        }
        .hotcity-name{
            height: 65rpx;
            line-height: 65rpx;
            color: #ccc;
        }
        .hotcity-menus{
            width: 90%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            .hotcity-item{
                width: 30%;
                padding: 10rpx 0;
                margin-bottom: 20rpx;
                border: 1px solid #e1e1e1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .divider{
        width: 100%;
        height: 24rpx;
        background-color: #e1e1e1;
    }
    .citycont{
        width: 88%;
        margin-left: 20rpx;
        .city-letter{
            height: 80rpx;
            line-height: 90rpx;
        }
        .city-item{
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1px solid #e1e1e1;
        }
    }
    .city-letter-position{
        width: 62rpx;
        position: fixed;
        right: 20rpx;
        top: 180rpx;
        text-align: center;
        z-index: 123;
        .city-letter-rm{
            font-size: 24rpx;
        }
        .city-letter-ite{
            font-size: 24rpx;
            line-height: 1.5;
        }
    }
}
</style>

common文件下 新建 city.js 
json 源链接：https://shadow.elemecdn.com/lib/[email protected]/city_list.json