拼音字母匹配排序php,小程序实现仿通讯录,拼音字母排序

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

名片夹.gif

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

json数据

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

GB字库

该字库在使用过程中有部分中文不能转换成拼音，如伉俪，恺，阚。虽然姓氏中不会有以上汉字开头，但还是找一个比较完美的方案比较好，遂又找到了另一个转换库

该文件末包含使用方法，使用时请删除或注释。该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就可以去掉，该页面滑动时还存在定位不准的问题。如果有人有更好的解决方法，欢迎交流！！！

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