在做这个之前看了许多例子，数据大部分是静态数据，右侧字母列表也是固定的A-Z，不管有没有包含该首字母的联系人，26个字母全部渲染出来，我觉得这样不是很严谨。第一次记录自己在写（copy&paste）代码过程的一些体会，废话有点多。正篇开始，效果如下:
后台提供api,服务器返回的数据格式如图：
本篇文章参照该网址实现部分功能：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2879
第一步：在网上找到国标一二级字库（一级3755个，按拼音排序;二级3008个，按部首/笔画排序）只截取了一部分
hz2py.js下载地址：https://pan.baidu.com/s/1v6SCZ6iJkV00rMLvnd1PPA
该字库在使用过程中有部分中文不能转换成拼音，如伉俪，恺，阚。虽然姓氏中不会有以上汉字开头，但还是找一个比较完美的方案比较好，遂又找到了另一个转换库
hz2py_full.js下载地址：https://pan.baidu.com/s/1kh0-T06Y8HQ4JwV3PcW5gg
该文件末包含使用方法，使用时请删除或注释。该js库可自动将汉字转成首字母大写的完整拼音，添加参数也可转成小写
页面初始数据
data: {
inputShowed: false,
inputVal: "",
// rightShow: false,
// dropShow: false,
indexShow: false,
toView: "e",
scrollTop: 1000,
indexId: "",
indexy: "",
indexEnglish: "",
cardList:{},
indexArr:[],
searchResult:{}
},
请求数据，并返回前端页面所需要的数据格式
前端页面
点击触摸滑动部分代码
pinyin.go(str[i].nickName).slice(0, 1).toUpperCase()这里转为大写也不是必须的，因为在测试时发现数据如果有小写字母开头的英文名，右侧列表中将同时出现类似W,w大小写两个不同的分组，这一点也可以在开始录入数据时做判断，toUpperCase就可以去掉，该页面滑动时还存在定位不准的问题。如果有人有更好的解决方法，欢迎交流！！！
第一次发文章，截图比较快，不知道怎么设置代码高亮
