分享一個大牛寫的通訊錄列表决左，十分感謝這位大牛耘子！大牛在blog中有貼出代碼液南，大家直接復(fù)制黏貼就可以踩麦，棒棒噠~枚赡！
https://blog.csdn.net/weixin_38289645/article/details/81781165
ps：并不是真的直接復(fù)制黏貼就好，比如數(shù)據(jù)谓谦，人家是從服務(wù)端取的贫橙，咱可以先寫死，大牛文章里有放出數(shù)據(jù)格式反粥，把數(shù)據(jù)中的items改為brands卢肃，把數(shù)據(jù)塞入someArr疲迂，就能愉快的使用了。
先上一個大牛的效果圖莫湘。
本文的重點尤蒿，其實上面已經(jīng)說完了，哈哈哈幅垮。下面大家隨便看看就好
實現(xiàn)功能
1腰池、一個滑動的通訊錄列表（大牛做的其實是品牌列表，但是這不重要）忙芒，擁有粘性頭部（粘性頭部就是滑動到B模塊巩螃，B會固定在頂部）
2、列表與右邊的首字母索引是聯(lián)動的（點字母可以跳轉(zhuǎn)列表對應(yīng)位置匕争，滑動列表避乏，索引active也會跟著變化）。
小小小小的bug
整體這個代碼是沒有毛病的甘桑，細(xì)節(jié)上有一點點要優(yōu)化的拍皮。
1、點擊索引Z跑杭，Z中的數(shù)據(jù)只有幾條不滿一屏铆帽，屏幕頂部是X的數(shù)據(jù)時，索引active會由Z變?yōu)閄
原因：目測是點擊時德谅，索引active為Z爹橱，列表滾動到Z的位置，但是由于Z的位置是列表最下方且不足一屏窄做，列表的實際滑動距離是到X的位置愧驱，之后由滑動距離計算索引active，于是索引active又變成了X
2椭盏、因為粘性頭部其實是另外一個元素组砚，被固定在頂部。所以可能會出現(xiàn)兩個頭部部分重疊的情況掏颊。
項目里的一些更改
1糟红、我需要在列表的頭部加入一個搜索框，一開始是加在<scroll-view>上方乌叶，但是由于搜索框占據(jù)了一部分的高度盆偿，<scroll-view>的高度是100%，不大好計算准浴。于是之后直接把搜索框塞到了粘性頭部（定位）里事扭，一起定位到最高。<scroll-view>再扣除相應(yīng)的高度（我是用padding-top兄裂，把輸入框的高度空出來）
2句旱、數(shù)據(jù)格式處理中碰到的問題阳藻。大牛的代碼中有涉及到數(shù)據(jù)處理晰奖，大牛的原始數(shù)據(jù)格式如下谈撒。
//原始數(shù)據(jù)格式
[{
brandId:'001',
brandName:'法拉利',
initial:'A'
}，{
brandId:'001',
brandName:'法拉利',
initial:'F'
}]
我的數(shù)據(jù)格式也差不多匾南，唯一的區(qū)別是啃匿，大牛得到的數(shù)據(jù)格式，是根據(jù)initial由A到Z排序過的蛆楞，我的數(shù)據(jù)是亂序的溯乒，首先想到的就是sort排序。
呵呵豹爹，然鵝裆悄，sort在json排序數(shù)據(jù)的時候，有臂聋！問光稼！題！當(dāng)你的數(shù)據(jù)格式如上亂序排列孩等，并且數(shù)據(jù)量超過10以上艾君，sort排序之后得到的數(shù)據(jù)，仍然是亂七八糟的肄方。很憂傷冰垄，于是只能默默地for循環(huán)排序了。
3权她、在滑動列表里虹茶，特別是旁邊有索引的列表，有個滑塊....emmmm隅要，我是拒絕的写烤，所以用了樣式去除
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
