在做這個之前看了許多例子，數(shù)據(jù)大部分是靜態(tài)數(shù)據(jù)，右側(cè)字母列表也是固定的A-Z，不管有沒有包含該首字母的聯(lián)系人，26個字母全部渲染出來，我覺得這樣不是很嚴(yán)謹(jǐn)。第一次記錄自己在寫（copy&paste）代碼過程的一些體會，廢話有點多。正篇開始，效果如下:

名片夾.gif

后臺提供api,服務(wù)器返回的數(shù)據(jù)格式如圖：

json數(shù)據(jù)

本篇文章參照該網(wǎng)址實現(xiàn)部分功能：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2879

第一步：在網(wǎng)上找到國標(biāo)一二級字庫（一級3755個，按拼音排序;二級3008個，按部首/筆畫排序）只截取了一部分

GB字庫

hz2py.js下載地址：https://pan.baidu.com/s/1v6SCZ6iJkV00rMLvnd1PPA

該字庫在使用過程中有部分中文不能轉(zhuǎn)換成拼音，如伉儷，愷，闞。雖然姓氏中不會有以上漢字開頭，但還是找一個比較完美的方案比較好，遂又找到了另一個轉(zhuǎn)換庫

hz2py_full.js下載地址：https://pan.baidu.com/s/1kh0-T06Y8HQ4JwV3PcW5gg

該文件末包含使用方法，使用時請刪除或注釋。該js庫可自動將漢字轉(zhuǎn)成首字母大寫的完整拼音，添加參數(shù)也可轉(zhuǎn)成小寫

頁面初始數(shù)據(jù)

data: {

? ? inputShowed: false,

? ? inputVal: "",? ?

? ? // rightShow: false,

? ? // dropShow: false,

? ? indexShow: false,

? ? toView: "e",

? ? scrollTop: 1000,

? ? indexId: "",

? ? indexy: "",

? ? indexEnglish: "",? ? ? ?

? ? cardList:{},

? ? indexArr:[],

? ? searchResult:{}? ? ? ? ? ? ?

? },

請求數(shù)據(jù)，并返回前端頁面所需要的數(shù)據(jù)格式

請求數(shù)據(jù)并重排

datasort

前端頁面

cardcase

點擊觸摸滑動部分代碼

點擊滑動

pinyin.go(str[i].nickName).slice(0, 1).toUpperCase()這里轉(zhuǎn)為大寫也不是必須的，因為在測試時發(fā)現(xiàn)數(shù)據(jù)如果有小寫字母開頭的英文名，右側(cè)列表中將同時出現(xiàn)類似W,w大小寫兩個不同的分組，這一點也可以在開始錄入數(shù)據(jù)時做判斷，toUpperCase就可以去掉，該頁面滑動時還存在定位不準(zhǔn)的問題。如果有人有更好的解決方法，歡迎交流?。?！

第一次發(fā)文章，截圖比較快，不知道怎么設(shè)置代碼高亮