不是很好描述這種功能描滔，大概和通訊錄一樣，按名稱分組踪古，右側(cè)有字母列表含长，可進(jìn)行選擇。
（貼圖出來(lái)比較一目了然）
使用Vue實(shí)現(xiàn)伏穆，這里需要安裝一個(gè)插件better-scroll拘泞，安裝引入流程可進(jìn)上面鏈接的github上，按要求完成便可枕扫。
模板部分記得要按照要求來(lái)寫模板陪腌，然后將想要滑動(dòng)的部分，通過(guò)
ref獲取dom結(jié)構(gòu)烟瞧。
靜態(tài)布局部分要自己好好寫诗鸭，這里就不說(shuō)啦。
動(dòng)態(tài)數(shù)據(jù)渲染
我這里寫的是城市選擇列表参滴，但是功能和通訊錄是一樣的强岸，首先在城市父組件內(nèi)引入axios，引入這個(gè)是為了發(fā)起ajax請(qǐng)求砾赔。
然后在mounted這個(gè)鉤子函數(shù)內(nèi)蝌箍，發(fā)起ajax請(qǐng)求，也可以寫在created這個(gè)鉤子函數(shù)內(nèi)暴心，但是最好寫在mounted內(nèi)妓盲。
然后請(qǐng)求函數(shù)的具體執(zhí)行函數(shù)寫在methods內(nèi)，handleGetCityInfoSucc是成功接收的回調(diào)函數(shù)专普。這里的操作是先把返回結(jié)果打印出來(lái)悯衬。
接下來(lái)去data部分創(chuàng)建兩個(gè)變量，一個(gè)cities 是個(gè)對(duì)象脆诉，一個(gè)hotCities是個(gè)數(shù)組甚亭，默認(rèn)都為空贷币。
然后將返回結(jié)果賦值給它們。
接下來(lái)就是父組件傳值給子組件亏狰。
父組件通過(guò)綁定屬性傳遞給子組件
然后子組件去接收它們
通過(guò)props接收它們役纹，定義好類型。
然后找對(duì)應(yīng)的模板進(jìn)行修改暇唾。
紅框部分是一個(gè)兩層循環(huán)促脉，為什么是兩層循環(huán)呢？
返回的cities策州，內(nèi)部是一個(gè)對(duì)象瘸味，'A'，'B'够挂，'C'... 這些是它的
key旁仿，它們的值是數(shù)組形式
數(shù)組內(nèi)部又是若干個(gè)對(duì)象組成
【PS】對(duì)象也可以用
v-for循環(huán)，但是它的第二項(xiàng)就不是index了孽糖，而是key枯冈，這里的key就是A、B办悟、C...
第二層循環(huán)是第一層的item的內(nèi)部循環(huán)尘奏，所以圖中第二層循環(huán)寫的是innerItem of item， item是第一層循環(huán)中的(item, key) of cities病蛉。
雙層循環(huán)的時(shí)候炫加，如果父級(jí)的key值和子級(jí)循環(huán)的key一樣了，也沒(méi)有關(guān)系铺然，只要父級(jí)的key值不重復(fù)就行了
這里的key不是指的對(duì)象里的key了俗孝，指的是v-for循環(huán)要有的:key=""
字母索引組件的ABCD...的索引，同樣可以用上面的cities數(shù)據(jù)探熔，也就是第一層循環(huán)就能將索引都渲染出來(lái)驹针。
