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