[{"insert":"1. 通过函数处理后台数据库数据，形成 字母和包含姓名的一维数组的结构，并计算出不包含数据的字母，通过for循环组件和if组件来输出通讯录总内容和字母列表，并控制字母列表的样式表达\n2. 组件渲染后通过函数获取通讯录中每个字母的offsetTop数值并记录\n3. 通讯录通过滚动事件获取滚动距离，调用函数遍历步骤2中的offsetTop范围并返回当前应高亮的字母块响应到左侧字母栏中\n4. 左侧字母栏点击后筛选输出步骤2的数据获取应滑至数值并让通讯录滚动\n优化：\n1. 监听浏览器缩放比例，实时更新上述步骤2"},{"insert":{"image":"//file3.ih5.cn/v35/files/bdeae9dfd4a9de8f80fbfab8935a2bb6_21586_868_152.png"}},{"insert":{"image":"//file3.ih5.cn/v35/files/f8a63c48105d41ef47e3130577b05389_8075_439_108.png"}},{"insert":"\n2. 优化通讯录滑至底部后点击左侧字母栏还会有高亮效果"},{"insert":{"image":"//file3.ih5.cn/v35/files/ba7cb007196f324a7c8bc6ada9cb2f9c_7377_417_80.png"}},{"insert":"\n"}]
[{"insert":"https://filea15401b2f1e4.v4.h5sys.cn/play/IDyHhZmC\n这个通讯录列表，额外添加点击左边的字母导航，可以自动scroll到对应通讯录位置的功能。\n"}]
通过获取字母的offsetTop参数并监听通讯录滚动距离实现通讯录效果
0fdf16e429c5a0a5f7d6ab32d0b68609_39119_375_812.png
https://file35d2d2b88c7c.v4.h5sys.cn/play/xeMoSvkp