先上圖

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
內(nèi)容：

<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) {
        },
        // 獲取導(dǎo)航欄的高度
        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);

                // 選中狀態(tài)
                &.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": [
            "北京","博興","博羅","博愛","璧山","賓陽","賓縣","濱海","巴彥","寶應(yīng)","亳州","博爾塔拉","濱州","畢節(jié)",
            "本溪","北海","巴中","巴音郭楞","巴彥淖爾","包頭","保山","寶雞","保定","蚌埠","白銀","白山","百色","白城"
        ]
    },
    {
        "letter": "C",
        "list": [
            "成都","常州","長沙","長春","重慶","朝陽","巢湖","長治","昌吉","昌都","常德","滄州","郴州","承德","潮州",
            "滁州","楚雄","崇左","池州","赤峰","樅陽","從化","慈溪","淳安","崇州","崇義","崇仁","茌平","成武","城口",
            "呈貢","潮安","昌邑","長興","長汀","長泰","常熟","常山","昌樂","長樂","長海","長豐","長島","曹縣","蒼山",
            "蒼南"
        ]
    },
    {
        "letter": "D",
        "list": [
            "丹東","大理","東莞","大連","大興安嶺","大同","大慶","德州","德陽","德宏","達州","大豐","東營","迪慶",
            "定西","單縣","當涂","碭山","岱山","大邑","大田","大埔","丹陽","德化","德安","大足","大余","德慶","德清",
            "登封","德惠","定南","墊江","電白","德興","東海","東阿","定遠","定陶","東臺","東山","東平","東明","東源",
            "東陽","東鄉(xiāng)","洞頭","都江堰","都昌","東至"
        ]
    },
    {
        "letter": "E",
        "list": [
            "鄂爾多斯","恩施","恩平","鄂州"
        ]
    },
    {
        "letter": "F",
        "list": [
            "佛山","福州","防城港","撫順","阜新","阜陽","撫州","法庫","富陽","福清","阜寧","阜南","富民","浮梁","福鼎",
            "福安","佛岡","分宜","鳳陽","奉新","豐縣","鳳臺","豐順","封開","奉節(jié)","奉化","豐都","豐城","費縣","肥西",
            "肥東","肥城","方正","繁昌"
        ]
    },
    {
        "letter": "G",
        "list": [
            "廣州","貴陽","甘南","贛州","甘孜","廣安","廣元","貴港","桂林","果洛","固原","贛縣","贛榆","高安","固鎮(zhèn)",
            "古田","貴溪","灌云","冠縣","灌南","光澤","廣饒","廣寧","廣豐","廣德","廣昌","鞏義","高州","高郵","高邑",
            "高要","高唐","高青","高密","高陵","皋蘭","高淳","藁城"
        ]
    },
    {
        "letter": "H",
        "list": [
            "杭州","哈爾濱","邯鄲","海口","黑河","合肥","鶴崗","河池","鶴壁","漢中","哈密","海西","海南","海東","海北",
            "惠州","呼倫貝爾","葫蘆島","呼和浩特","黃石","黃山","黃南","黃岡","淮南","懷化","淮北","淮安","紅河","賀州",
            "菏澤","河源","和田地","衡陽","衡水","懷遠","懷寧","懷集","樺甸","華安","洪澤","和縣","鶴山","和平","橫縣",
            "橫峰","合川","含山","海陽","海鹽","海寧","海門","海豐","海安","湖州","戶縣","霍山","霍邱","呼蘭","湖口",
            "惠民","惠來","惠東","會昌","惠安","化州","桓臺"
        ]
    },
    {
        "letter": "J",
        "list": [
            "雞西","酒泉","九江","錦州","晉中","濟寧","金華","荊州","荊門","景德鎮(zhèn)","晉城","金昌","揭陽","嘉峪關(guān)","吉安",
            "江門","佳木斯","濟南","吉林","嘉興","焦作","井岡山","旌德","靖安","即墨","揭西","界首","揭東","嘉祥","嘉善",
            "膠州","膠南","蕉嶺","蛟河","吉安","建陽","建甌","建寧","建湖","江陰","姜堰","江山","將樂","江津","江都","建德",
            "九臺","九江","吉水","晉州","金寨","縉云","金鄉(xiāng)","金溪","進賢","金堂","金壇","晉寧","金門","晉江","金湖","井陘",
            "涇縣","景寧","靖江","巨野","莒縣","句容","莒南","鄄城","濟源","濟陽","績溪"
        ]
    },
    {
        "letter": "K",
        "list": [
            "昆明","開封","喀什地","克拉瑪依","克孜勒","開化","開平","開縣","開陽","康平","墾利","昆山"
        ]
    },
    {
        "letter": "L",
        "list": [
            "連云港","涼山","樂山","拉薩","廊坊","萊蕪","來賓","洛陽","柳州","蘭州","六盤水","六安","麗水","林芝","臨沂","臨夏",
            "臨汾","臨滄","麗江","遼源","遼陽","聊城","樂亭","樂清","樂平","樂陵","雷州","樂昌","樂安","蘭溪","藍田","郎溪",
            "萊州","萊陽","萊西","來安","呂梁","瀘州","漯河","婁底","龍巖","隴南","臨邑","臨沭","臨朐","臨泉","臨清","臨海",
            "陵縣","靈壽","靈璧","臨安","利津","黎川","遼中","連州","漣水","連山","連平","連南","廉江","連江","蓮花","梁山",
            "梁平","連城","鹿寨","蘆溪","祿勸","鹿泉","羅源","洛寧","羅定","廬江","陸河","陸豐","灤縣","灤南","欒川","欒城",
            "龍游","龍泉","龍南","龍門","龍口","龍海","龍川","隆安","溧陽","利辛","瀏陽","柳江","柳城","溧水"
        ]
    },
    {
        "letter": "M",
        "list": [
            "馬鞍山","茂名","眉山","梅州","綿陽","牡丹江","馬山","梅縣","蒙城","孟津","蒙陰","孟州","明光","明溪","閩侯","閩清",
            "木蘭"
        ]
    },
    {
        "letter": "N",
        "list": [
            "南昌","南京","南寧","南通","寧波","南充","南平","南陽","那曲","內(nèi)江","寧德","怒江","南安","南澳","南城","南川","南豐",
            "南靖","南康","南陵","南雄","寧都","寧國","寧海","寧化","寧津","寧鄉(xiāng)","寧陽","農(nóng)安"
        ]
    },
    {
        "letter": "P",
        "list": [
            "盤錦","攀枝花","平頂山","平?jīng)?,"萍鄉(xiāng)","普洱","莆田","濮陽","磐安","磐石","沛縣","蓬萊","彭水","彭澤","彭州","平度",
            "平和","平湖","屏南","平山","平潭","平陽","平陰","平邑","平原","平遠","郫縣","邳州","鄱陽","浦城","浦江","蒲江","普蘭店",
            "普寧"
        ]
    },
    {
        "letter": "Q",
        "list": [
            "青島","泉州","黔東","黔南","黔西南","慶陽","清遠","秦皇島","欽州","齊齊哈爾","七臺河","曲靖","衢州","遷安","潛山","鉛山",
            "遷西","啟東","齊河","綦江","祁門","清流","青田","清新","青陽","慶元","慶云","清鎮(zhèn)","青州","沁陽","邛崍","棲霞","全椒",
            "曲江","曲阜","全南"
        ]
    },
    {
        "letter": "R",
        "list": [
            "日喀則","日照","饒平","仁化","融安","榮昌","榮成","融水","如東","如皋","瑞安","瑞昌","瑞金","乳山","汝陽","乳源"
        ]
    },
    {
        "letter": "S",
        "list": [
            "上海","沈陽","深圳","石家莊","蘇州","三門峽","三明","三亞","商丘","商洛","上饒","汕尾","汕頭","紹興","韶關(guān)","山南","邵陽",
            "十堰","雙鴨山","石嘴山","綏化","松原","四平","朔州","泗陽","泗縣","泗水","四會","泗洪","沭陽","順昌","舒蘭","舒城","雙流",
            "雙城","壽縣","壽寧","壽光","石柱","始興","石臺","石獅","石林","石城","射陽","歙縣","深澤","莘縣","嵊州","嵊泗","沙縣","紹興",
            "邵武","尚志","上虞","上猶","上饒","上林","上栗","商河","上杭","上高","詔安","三門","三江","松陽","嵩縣","松溪","嵩明","宿州",
            "宿遷","隨州","遂寧","宿松","遂溪","濉溪","睢寧","遂川","遂昌","宿豫"
        ]
    },
    {
        "letter": "T",
        "list": [
            "天津","臺州","唐山","塔城地","泰安","太原","泰州","天水","鐵嶺","銅川","通化","通遼","銅陵","銅仁", "通州","桐鄉(xiāng)","銅山","潼南",
            "桐廬","銅陵","銅梁","通河","銅鼓","桐城","天臺","天長","滕州","唐海","郯城","泰興","泰順","臺山","泰寧","太湖","泰和","太和","太倉",
            "吐魯番"
        ]
    },
    {
        "letter": "W",
        "list": [
            "濰坊","威海","武漢","無錫","渭南","文山","溫州","烏海","蕪湖","烏蘭察布","烏魯木齊","武威","吳忠","武陟","婺源","武夷山","武義","巫溪",
            "無為","巫山","武平","武寧","武鳴","武隆","五蓮","吳江","無極","五華","蕪湖","五河","無棣","吳川","武城","五常","渦陽","溫縣","汶上",
            "溫嶺","翁源","文登","文成","微山","萬載","萬年","望江","望城","萬安","瓦房店","梧州"
        ]
    },
    {
        "letter": "X",
        "list": [
            "廈門","西安","許昌","徐州","襄樊","湘潭","湘西","咸寧","咸陽","孝感","錫林郭勒盟","興安盟","邢臺","西寧","新鄉(xiāng)","信陽","新余","忻州",
            "西雙版納","宣城","峽江","夏津","象山","響水","仙居","仙游","蕭縣","霞浦","息烽","新安","新昌","信豐","新豐","新干","興國","興化","興寧",
            "行唐","滎陽","星子","辛集","新建","新津","新樂","新民","新密","新泰","新興","新沂","信宜","新鄭","休寧","秀山","修水","修文","修武",
            "尋甸","盱眙","徐聞","尋烏"
        ]
    },
    {
        "letter": "Y",
        "list": [
            "揚州","煙臺","雅安","延安","延邊","鹽城","陽江","陽泉","宜賓","宜昌","伊春","宜春","伊犁哈薩克","銀川","營口","鷹潭","益陽","永州","岳陽",
            "玉林","榆林","運城","云浮","玉樹","玉溪","陽春","陽東","陽谷","陽山","陽信","陽西","揚中","偃師","延壽","兗州","伊川","宜豐","宜黃","依蘭",
            "宜良","沂南","英德","潁上","沂水","義烏","黟縣","宜興","弋陽","宜陽","沂源","儀征","永安","永川","永春","永登","永定","永豐","永吉","永嘉",
            "永康","邕寧","永泰","永新","永修","尤溪","酉陽","元氏","禹城","于都","岳西","余干","玉環(huán)","余江","郁南","云安","鄆城","云和","云霄","云陽",
            "玉山","榆樹","魚臺","玉田","余姚","榆中"
        ]
    },
    {
        "letter": "Z",
        "list": [
            "漳州","遵化","鄭州","中山","珠海","棗莊","張家界","張家口","張掖","湛江","肇慶","昭通","鎮(zhèn)江","中衛(wèi)","周口","舟山","駐馬店","株洲","淄博",
            "自貢","資陽","遵義","贊皇","增城","張家港","漳平","漳浦","章丘","樟樹","沾化","趙縣","招遠","正定","政和","柘榮","中牟","忠縣","周寧",
            "周至","莊河","諸城","諸暨","紫金","資溪","鄒城","鄒平"
        ]
    }
]

export default citys