在做这个之前看了许多例子，数据大部分是静态数据，右侧字母列表也是固定的A-Z，不管有没有包含该首字母的联系人，26个字母全部渲染出来，我觉得这样不是很严谨。第一次记录自己在写（copy&paste）代码过程的一些体会，废话有点多。正篇开始，效果如下:

名片夹.gif

后台提供api,服务器返回的数据格式如图：

json数据

本篇文章参照该网址实现部分功能：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2879

第一步：在网上找到国标一二级字库（一级3755个，按拼音排序;二级3008个，按部首/笔画排序）只截取了一部分

GB字库

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:{}             

  },

请求数据，并返回前端页面所需要的数据格式

请求数据并重排

datasort

前端页面

cardcase

点击触摸滑动部分代码

点击滑动

pinyin.go(str[i].nickName).slice(0, 1).toUpperCase()这里转为大写也不是必须的，因为在测试时发现数据如果有小写字母开头的英文名，右侧列表中将同时出现类似W,w大小写两个不同的分组，这一点也可以在开始录入数据时做判断，toUpperCase就可以去掉，该页面滑动时还存在定位不准的问题。如果有人有更好的解决方法，欢迎交流！！！

第一次发文章，截图比较快，不知道怎么设置代码高亮