先上图

ChooseCity.gif

Github源码地址

使用方法

插件的方式使用：

import ssSelectCity from '@/components/ss-select-city/ss-select-city.vue'
components: {
    ssSelectCity
},

hotCitys: ['杭州', '天津', '北京', '上海', '深圳', '广州', '成都', '重庆', '厦门'],
locationValue: '正在定位...',

<ss-select-city :hotCitys="hotCitys" v-model="locationValue" :locationValue="locationValue" @on-select="selectValue" />

selectValue(city) {
    console.log(city)
    this.locationValue = city
        uni.showToast({
        title:city,
        icon: 'none'
    })
}

插件文件：ss-select-city.vue
内容：

<template>
    <view class="select-city-wrap">
        <view class="select-city">
            <view class="index-bg-view">
                <view class="index" @touchmove="touchMoveIndex">
                    <view class="index-item" @click="scrollTo('#')">#</view>
                    <view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{ item.letter }}</view>
                </view>
            </view>
            <scroll-view :scroll-into-view="scrollIntoId" @scroll="scrollChange" :scroll-y="true" :scroll-with-animation="isAnimation" :style="{ height: windowHeight }">
                <view class="content">
                    <view class="section" id="current">
                        <view class="city-title">当前城市</view>
                        <view class="city-list">
                            <view @click="onSelect(value)" class="city-item" style="display: flex; justify-content: center; align-items: center;">
                                <image
                                    v-if="locationValue == value"
                                    style="margin-right: 12rpx; width: 40rpx; height: 40rpx;"
                                    src="/static/nav_icon_dw@3x.png"
                                    mode="aspectFit"
                                ></image>
                                {{ current }}
                            </view>
                        </view>
                    </view>
                    <view class="section" id="hot" v-if="hotCitys.length">
                        <view class="city-title">热门城市</view>
                        <view class="city-list">
                            <view class="city-item" :class="{ active: current === city }" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{ city }}</view>
                        </view>
                    </view>
                    <view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
                        <view class="letter">{{ item.letter }}</view>
                        <view class="city-list">
                            <view class="city-item" :class="{ active: current === city }" v-for="(city, itemIndex) in item.list" :key="itemIndex" @click="onSelect(city)">
                                {{ city }}
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
import Citys from './citys';
export default {
    props: {
        hotCitys: {
            type: Array,
            default() {
                return [];
            }
        },
        value: {
            type: String,
            default: ''
        },
        locationValue: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            citys: Citys,
            windowHeight: '',
            scrollIntoId: 'F',
            current: this.value,
            itemBounds: {},
            marginTopHeight: 0,
            isAnimation: true,
            query: null
        };
    },
    mounted() {
        this.getSystemInfo();
    },
    created() {
        let that = this;
        uni.$on('upadteLoaction', function(city) {
            that.current = city;
            console.log(city);
        });
    },
    beforeDestroy() {
        uni.$off(['upadteLoaction']);
    },
    methods: {
        scrollChange: function(e) {
        },
        // 获取导航栏的高度
        getItemHeight: function() {
            let that = this;
            this.query = uni.createSelectorQuery().in(this);
            this.query
                .select('.index-item')
                .boundingClientRect(data => {
                    let itemW = data.width;
                    let itemH = data.height;
                    that.itemBounds = {
                        width: itemW,
                        height: itemH
                    };
                })
                .exec();
            this.query
                .select('.index')
                .boundingClientRect(data => {
                    console.log(data);
                    console.log(this.windowHeight);
                    console.log(data.height);
                    this.marginTopHeight = (parseInt(this.windowHeight) - parseInt(data.height)) / 2;
                    console.log(this.marginTopHeight);
                })
                .exec();
            this.query
                .select('.letter')
                .boundingClientRect(data => {
                    console.log(data);
                    
                })
                .exec();
        },
        getSystemInfo() {
            uni.getSystemInfo().then(res => {
                let [error, data] = res;
                this.windowHeight = `${data.windowHeight}px`;
                this.getItemHeight();
            });
        },

        scrollTo(letter) {
            console.log(letter);
            this.isAnimation = false;
            this.scrollIntoId = letter === '#' ? 'current' : letter;
        },
        onSelect(city) {
            console.log(city);
            this.current = city;
            this.$emit('input', city);
            this.$emit('on-select', city);
        },

        touchMoveIndex: function(e) {
            let info = e.changedTouches[0];
            // console.log('开始移动点：' + info.pageY);
            let itemY = info.pageY - this.marginTopHeight;
            var count = Math.ceil(itemY / this.itemBounds.height);
            if (count == 1) {
                this.isAnimation = true;
                this.scrollIntoId = 'current';
                return;
            }
            // console.log(count);
            if (count > 23) {
                return
            }
            if (count - 1 > 0) {
                count = count - 1;
            }
            let item = this.citys[count - 1];
            if (this.scrollIntoId == item.letter) {
                return;
            }
            // console.log(item.letter);
            this.isAnimation = true;
            this.scrollIntoId = item.letter === '#' ? 'current' : item.letter;
        }
    }
};
</script>

<style lang="scss" scoped>
.select-city-wrap {
    position: relative;
    padding: 0 30upx;
    background-color: rgba(34, 33, 33, 1);
}

.index-item {
    width: 60upx;
    height: 42upx;
    line-height: 42upx;
    text-align: center;
}

.select-city {
    .index-bg-view {
        position: absolute;
        right: 10upx;
        z-index: 999;

        height: 100%;
        width: 60upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .index {
        // position: absolute;
        // right: 10upx;
        // top: 140upx;
        // z-index: 999;
        color: rgba(255, 255, 255, 0.5);
        font-size: 32upx;
    }

    .section {
        margin-bottom: 19upx;
        .city-title {
            color: rgba(255, 255, 255, 1);
            font-size: 28upx;
            margin-bottom: 28upx;
            margin-top: 30rpx;
        }

        .letter {
            width: 44upx;
            height: 44upx;
            color: #fff;
            font-weight: bold;
            // border-radius: 100%;
            // background-color: #2f9bfe;
            font-size: 28upx;
            line-height: 44upx;
            text-align: center;
            margin-bottom: 30upx;
        }

        .city-list {
            display: flex;
            flex-wrap: wrap;

            .city-item {
                width: 200upx;
                height: 64upx;
                margin-right: 20upx;
                margin-bottom: 20upx;
                line-height: 64upx;
                text-align: center;
                // border: 1px solid #dcdcdc;
                border-radius: 8upx;
                color: rgba(255, 255, 255, 1);
                font-size: 28upx;
                background-color: rgba(255, 255, 255, 0.1);

                // 选中状态
                &.active {
                    background-color: rgba(247, 70, 104, 1);
                    // border-color: #2f9bfe;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}
</style>

城市文件 citys.js

const citys = [
    {
        "letter": "A",
        "list": [
            "安远","安义","安溪","安丘","安宁","安吉","安福","阿城","安阳","安顺","鞍山","安庆","安康","阿里",
            "阿勒泰","阿拉善盟","阿克苏","阿坝"
        ]
    },
    {
        "letter": "B",
        "list": [
            "北京","博兴","博罗","博爱","璧山","宾阳","宾县","滨海","巴彦","宝应","亳州","博尔塔拉","滨州","毕节",
            "本溪","北海","巴中","巴音郭楞","巴彦淖尔","包头","保山","宝鸡","保定","蚌埠","白银","白山","百色","白城"
        ]
    },
    {
        "letter": "C",
        "list": [
            "成都","常州","长沙","长春","重庆","朝阳","巢湖","长治","昌吉","昌都","常德","沧州","郴州","承德","潮州",
            "滁州","楚雄","崇左","池州","赤峰","枞阳","从化","慈溪","淳安","崇州","崇义","崇仁","茌平","成武","城口",
            "呈贡","潮安","昌邑","长兴","长汀","长泰","常熟","常山","昌乐","长乐","长海","长丰","长岛","曹县","苍山",
            "苍南"
        ]
    },
    {
        "letter": "D",
        "list": [
            "丹东","大理","东莞","大连","大兴安岭","大同","大庆","德州","德阳","德宏","达州","大丰","东营","迪庆",
            "定西","单县","当涂","砀山","岱山","大邑","大田","大埔","丹阳","德化","德安","大足","大余","德庆","德清",
            "登封","德惠","定南","垫江","电白","德兴","东海","东阿","定远","定陶","东台","东山","东平","东明","东源",
            "东阳","东乡","洞头","都江堰","都昌","东至"
        ]
    },
    {
        "letter": "E",
        "list": [
            "鄂尔多斯","恩施","恩平","鄂州"
        ]
    },
    {
        "letter": "F",
        "list": [
            "佛山","福州","防城港","抚顺","阜新","阜阳","抚州","法库","富阳","福清","阜宁","阜南","富民","浮梁","福鼎",
            "福安","佛冈","分宜","凤阳","奉新","丰县","凤台","丰顺","封开","奉节","奉化","丰都","丰城","费县","肥西",
            "肥东","肥城","方正","繁昌"
        ]
    },
    {
        "letter": "G",
        "list": [
            "广州","贵阳","甘南","赣州","甘孜","广安","广元","贵港","桂林","果洛","固原","赣县","赣榆","高安","固镇",
            "古田","贵溪","灌云","冠县","灌南","光泽","广饶","广宁","广丰","广德","广昌","巩义","高州","高邮","高邑",
            "高要","高唐","高青","高密","高陵","皋兰","高淳","藁城"
        ]
    },
    {
        "letter": "H",
        "list": [
            "杭州","哈尔滨","邯郸","海口","黑河","合肥","鹤岗","河池","鹤壁","汉中","哈密","海西","海南","海东","海北",
            "惠州","呼伦贝尔","葫芦岛","呼和浩特","黄石","黄山","黄南","黄冈","淮南","怀化","淮北","淮安","红河","贺州",
            "菏泽","河源","和田地","衡阳","衡水","怀远","怀宁","怀集","桦甸","华安","洪泽","和县","鹤山","和平","横县",
            "横峰","合川","含山","海阳","海盐","海宁","海门","海丰","海安","湖州","户县","霍山","霍邱","呼兰","湖口",
            "惠民","惠来","惠东","会昌","惠安","化州","桓台"
        ]
    },
    {
        "letter": "J",
        "list": [
            "鸡西","酒泉","九江","锦州","晋中","济宁","金华","荆州","荆门","景德镇","晋城","金昌","揭阳","嘉峪关","吉安",
            "江门","佳木斯","济南","吉林","嘉兴","焦作","井冈山","旌德","靖安","即墨","揭西","界首","揭东","嘉祥","嘉善",
            "胶州","胶南","蕉岭","蛟河","吉安","建阳","建瓯","建宁","建湖","江阴","姜堰","江山","将乐","江津","江都","建德",
            "九台","九江","吉水","晋州","金寨","缙云","金乡","金溪","进贤","金堂","金坛","晋宁","金门","晋江","金湖","井陉",
            "泾县","景宁","靖江","巨野","莒县","句容","莒南","鄄城","济源","济阳","绩溪"
        ]
    },
    {
        "letter": "K",
        "list": [
            "昆明","开封","喀什地","克拉玛依","克孜勒","开化","开平","开县","开阳","康平","垦利","昆山"
        ]
    },
    {
        "letter": "L",
        "list": [
            "连云港","凉山","乐山","拉萨","廊坊","莱芜","来宾","洛阳","柳州","兰州","六盘水","六安","丽水","林芝","临沂","临夏",
            "临汾","临沧","丽江","辽源","辽阳","聊城","乐亭","乐清","乐平","乐陵","雷州","乐昌","乐安","兰溪","蓝田","郎溪",
            "莱州","莱阳","莱西","来安","吕梁","泸州","漯河","娄底","龙岩","陇南","临邑","临沭","临朐","临泉","临清","临海",
            "陵县","灵寿","灵璧","临安","利津","黎川","辽中","连州","涟水","连山","连平","连南","廉江","连江","莲花","梁山",
            "梁平","连城","鹿寨","芦溪","禄劝","鹿泉","罗源","洛宁","罗定","庐江","陆河","陆丰","滦县","滦南","栾川","栾城",
            "龙游","龙泉","龙南","龙门","龙口","龙海","龙川","隆安","溧阳","利辛","浏阳","柳江","柳城","溧水"
        ]
    },
    {
        "letter": "M",
        "list": [
            "马鞍山","茂名","眉山","梅州","绵阳","牡丹江","马山","梅县","蒙城","孟津","蒙阴","孟州","明光","明溪","闽侯","闽清",
            "木兰"
        ]
    },
    {
        "letter": "N",
        "list": [
            "南昌","南京","南宁","南通","宁波","南充","南平","南阳","那曲","内江","宁德","怒江","南安","南澳","南城","南川","南丰",
            "南靖","南康","南陵","南雄","宁都","宁国","宁海","宁化","宁津","宁乡","宁阳","农安"
        ]
    },
    {
        "letter": "P",
        "list": [
            "盘锦","攀枝花","平顶山","平凉","萍乡","普洱","莆田","濮阳","磐安","磐石","沛县","蓬莱","彭水","彭泽","彭州","平度",
            "平和","平湖","屏南","平山","平潭","平阳","平阴","平邑","平原","平远","郫县","邳州","鄱阳","浦城","浦江","蒲江","普兰店",
            "普宁"
        ]
    },
    {
        "letter": "Q",
        "list": [
            "青岛","泉州","黔东","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","七台河","曲靖","衢州","迁安","潜山","铅山",
            "迁西","启东","齐河","綦江","祁门","清流","青田","清新","青阳","庆元","庆云","清镇","青州","沁阳","邛崃","栖霞","全椒",
            "曲江","曲阜","全南"
        ]
    },
    {
        "letter": "R",
        "list": [
            "日喀则","日照","饶平","仁化","融安","荣昌","荣成","融水","如东","如皋","瑞安","瑞昌","瑞金","乳山","汝阳","乳源"
        ]
    },
    {
        "letter": "S",
        "list": [
            "上海","沈阳","深圳","石家庄","苏州","三门峡","三明","三亚","商丘","商洛","上饶","汕尾","汕头","绍兴","韶关","山南","邵阳",
            "十堰","双鸭山","石嘴山","绥化","松原","四平","朔州","泗阳","泗县","泗水","四会","泗洪","沭阳","顺昌","舒兰","舒城","双流",
            "双城","寿县","寿宁","寿光","石柱","始兴","石台","石狮","石林","石城","射阳","歙县","深泽","莘县","嵊州","嵊泗","沙县","绍兴",
            "邵武","尚志","上虞","上犹","上饶","上林","上栗","商河","上杭","上高","诏安","三门","三江","松阳","嵩县","松溪","嵩明","宿州",
            "宿迁","随州","遂宁","宿松","遂溪","濉溪","睢宁","遂川","遂昌","宿豫"
        ]
    },
    {
        "letter": "T",
        "list": [
            "天津","台州","唐山","塔城地","泰安","太原","泰州","天水","铁岭","铜川","通化","通辽","铜陵","铜仁", "通州","桐乡","铜山","潼南",
            "桐庐","铜陵","铜梁","通河","铜鼓","桐城","天台","天长","滕州","唐海","郯城","泰兴","泰顺","台山","泰宁","太湖","泰和","太和","太仓",
            "吐鲁番"
        ]
    },
    {
        "letter": "W",
        "list": [
            "潍坊","威海","武汉","无锡","渭南","文山","温州","乌海","芜湖","乌兰察布","乌鲁木齐","武威","吴忠","武陟","婺源","武夷山","武义","巫溪",
            "无为","巫山","武平","武宁","武鸣","武隆","五莲","吴江","无极","五华","芜湖","五河","无棣","吴川","武城","五常","涡阳","温县","汶上",
            "温岭","翁源","文登","文成","微山","万载","万年","望江","望城","万安","瓦房店","梧州"
        ]
    },
    {
        "letter": "X",
        "list": [
            "厦门","西安","许昌","徐州","襄樊","湘潭","湘西","咸宁","咸阳","孝感","锡林郭勒盟","兴安盟","邢台","西宁","新乡","信阳","新余","忻州",
            "西双版纳","宣城","峡江","夏津","象山","响水","仙居","仙游","萧县","霞浦","息烽","新安","新昌","信丰","新丰","新干","兴国","兴化","兴宁",
            "行唐","荥阳","星子","辛集","新建","新津","新乐","新民","新密","新泰","新兴","新沂","信宜","新郑","休宁","秀山","修水","修文","修武",
            "寻甸","盱眙","徐闻","寻乌"
        ]
    },
    {
        "letter": "Y",
        "list": [
            "扬州","烟台","雅安","延安","延边","盐城","阳江","阳泉","宜宾","宜昌","伊春","宜春","伊犁哈萨克","银川","营口","鹰潭","益阳","永州","岳阳",
            "玉林","榆林","运城","云浮","玉树","玉溪","阳春","阳东","阳谷","阳山","阳信","阳西","扬中","偃师","延寿","兖州","伊川","宜丰","宜黄","依兰",
            "宜良","沂南","英德","颍上","沂水","义乌","黟县","宜兴","弋阳","宜阳","沂源","仪征","永安","永川","永春","永登","永定","永丰","永吉","永嘉",
            "永康","邕宁","永泰","永新","永修","尤溪","酉阳","元氏","禹城","于都","岳西","余干","玉环","余江","郁南","云安","郓城","云和","云霄","云阳",
            "玉山","榆树","鱼台","玉田","余姚","榆中"
        ]
    },
    {
        "letter": "Z",
        "list": [
            "漳州","遵化","郑州","中山","珠海","枣庄","张家界","张家口","张掖","湛江","肇庆","昭通","镇江","中卫","周口","舟山","驻马店","株洲","淄博",
            "自贡","资阳","遵义","赞皇","增城","张家港","漳平","漳浦","章丘","樟树","沾化","赵县","招远","正定","政和","柘荣","中牟","忠县","周宁",
            "周至","庄河","诸城","诸暨","紫金","资溪","邹城","邹平"
        ]
    }
]

export default citys