分享一个大牛写的通讯录列表，十分感谢这位大牛！大牛在blog中有贴出代码，大家直接复制黏贴就可以，棒棒哒~！
https://blog.csdn.net/weixin_38289645/article/details/81781165
ps：并不是真的直接复制黏贴就好，比如数据，人家是从服务端取的，咱可以先写死，大牛文章里有放出数据格式，把数据中的items改为brands，把数据塞入someArr，就能愉快的使用了。
先上一个大牛的效果图。
本文的重点，其实上面已经说完了，哈哈哈。下面大家随便看看就好
实现功能
1、一个滑动的通讯录列表（大牛做的其实是品牌列表，但是这不重要），拥有粘性头部（粘性头部就是滑动到B模块，B会固定在顶部）
2、列表与右边的首字母索引是联动的（点字母可以跳转列表对应位置，滑动列表，索引active也会跟着变化）。
image.png
小小小小的bug
整体这个代码是没有毛病的，细节上有一点点要优化的。
1、点击索引Z，Z中的数据只有几条不满一屏，屏幕顶部是X的数据时，索引active会由Z变为X
原因：目测是点击时，索引active为Z，列表滚动到Z的位置，但是由于Z的位置是列表最下方且不足一屏，列表的实际滑动距离是到X的位置，之后由滑动距离计算索引active，于是索引active又变成了X
2、因为粘性头部其实是另外一个元素，被固定在顶部。所以可能会出现两个头部部分重叠的情况。
image.png
项目里的一些更改
1、我需要在列表的头部加入一个搜索框，一开始是加在<scroll-view>上方，但是由于搜索框占据了一部分的高度，<scroll-view>的高度是100%，不大好计算。于是之后直接把搜索框塞到了粘性头部（定位）里，一起定位到最高。<scroll-view>再扣除相应的高度（我是用padding-top，把输入框的高度空出来）
2、数据格式处理中碰到的问题。大牛的代码中有涉及到数据处理，大牛的原始数据格式如下。
//原始数据格式
[{
brandId:'001',
brandName:'法拉利',
initial:'A'
}，{
brandId:'001',
brandName:'法拉利',
initial:'F'
}]
我的数据格式也差不多，唯一的区别是，大牛得到的数据格式，是根据initial由A到Z排序过的，我的数据是乱序的，首先想到的就是sort排序。
呵呵，然鹅，sort在json排序数据的时候，有！问！题！当你的数据格式如上乱序排列，并且数据量超过10以上，sort排序之后得到的数据，仍然是乱七八糟的。很忧伤，于是只能默默地for循环排序了。
3、在滑动列表里，特别是旁边有索引的列表，有个滑块....emmmm，我是拒绝的，所以用了样式去除
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
网友评论