目錄

1.記錄小練習：做出仿微信H5頁面

2.提升優化

---

1.記錄小練習：做出仿微信H5頁面

1.首先我創建了一個js文件，存放數據，value為圖像位置，label為名稱

---

2.開始編寫html，引用rem.js,vue.js等文件，注意了rem適配移動端，代碼：

/*** Created by zq on 2017/11/8.*/ (function (doc, win) {var docEl = doc.documentElement,resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if (clientWidth < 750) {docEl.style.fontSize = (clientWidth / 37.5) + "px"; //750} else {docEl.style.fontSize = "88px"; //750}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);recalc() })(document, window);

想要達成首字母排序且循環顯示通訊錄各個項的目的，就要想辦法把數據轉化為如下格式方便循環

[{"ch":"D","data":[{"value":"img/2.png","label":"玳瑁貓"}]},{"ch":"J","data":[{"value":"img/4.png","label":"加菲貓"},{"value":"img/5.png","label":"金漸層"},{"value":"img/1.png","label":"橘貓"}]},{"ch":"L","data":[{"value":"img/6.png","label":"藍白貓"},{"value":"img/7.png","label":"藍貓"},{"value":"img/8.png","label":"貍花貓"},{"value":"img/12.png","label":"貍花貓"}]}]

采用方法為網上百度出來的提取首字母方法，經過處理成為我想要的數據格式，代碼如下

// 解析中文拼音并排序mailClassification() {const pySegSort = (list, key = 'text') => {if (!list || list.length === 0) return nullif (!String.prototype.localeCompare) return nullconst letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'const zh = '阿八嚓噠妸發旮哈譏咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('').map((item, i) => ({[key]: item,l: letters[i], // 字母}))const all = [...zh, ...list]all.sort((a, b) => {const c = a[key] || aconst d = b[key] || breturn c.localeCompare(d)})// console.log(JSON.stringify(all))const res = {}let segs = []let s = []let p = []let newData = []while (all.length > 0) {const cur = all.pop()if (cur.l) {if (segs.length > 0) {res[cur.l] = segsthis.mailLetter.push(cur.l)newData.push({ 'ch': cur.l, "data": res[cur.l] })segs = []}}else {segs.unshift(cur)}}return newData}let data = this.mailDataconst newData = pySegSort(data, 'label')this.mailData = newDatathis.allData = newData// this.mailData.forEach(item=> {})this.mailData.reverse()// console.log(JSON.stringify(this.mailData))}}

---

3.開始循環在頁面上展示

?添加可以實時監控的input搜索框，以及完成字母索引樣式

?

索引中的方法：handleLetterClick是點擊索引，頁面就會將相應首字母滾到頭的方法。（在最后一行不觸底的情況下）?

引入jq<script?src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

這里我想的是通過給列表中的首字母動態賦值id，結合scrollTop的方式滾動，mailLetter是列表中包含的首字母，如果存在就滾動，不存在就維持頁面的位置。

?

---

4.搜索方法：想要達成的效果是可以進行漢字搜索，也可進行對拼音的搜索，這里我找了好多方法，最后采用引入pinyin-match包的方式：npm install pinyin-match --save

搜索的函數如下：

---

完成啦?

---

2.提升優化

為了增加字母開頭的數據以及特殊字符，預計思路如下：

具體實現：

1.利用正則表達式篩選出特殊字符以及數字放到一個數組normalList中，然后在總數組中去除掉字母部分，使用自定義函數removeNormal

this.mailData.forEach(item => {var re = new RegExp("^[\u4e00-\u9fa5]")var rr = new RegExp("^[a-zA-Z]")re.test(item.label)if (!re.test(item.label) && !rr.test(item.label)) {arrData.push({ 'value': item.value, 'label': item.label })this.currentList.push({ 'value': item.value, 'label': item.label })}})this.normalList.push({ 'ch': '#', 'data': arrData }) removeNormal(arr) {var index = 0var re = new RegExp("^[\u4e00-\u9fa5]")var rr = new RegExp("^[a-zA-Z]")for (var i in arr) {console.log('arr: ' + JSON.stringify(arr[i].label))if (!rr.test(arr[i].label)) {index = ibreak}}arr.splice(index, 1)},

2.提取開頭為字母的部分進行格式化，使用函數switchLabel

switchLabel(arr) {let arrData = []let dataList = []let arrList = []let fleg = falsefor (let i = 0; i < this.letter.length; i++) {arr.forEach(item => {// arrData = []let little = this.letter[i].toLowerCase()if (item.label.substr(0, 1) == little || item.label.substr(0, 1) == this.letter[i]) {arrData.push({ 'value': item.value, 'label': item.label })this.currentList.push({ 'value': item.value, 'label': item.label })fleg = true}})if (fleg) {dataList.push({ 'ch': this.letter[i], 'data': arrData })}arrData = []fleg = false}return dataList},

3.數組去重，然后采用之前的提取中文拼音首字母進行操作

removeByValue(arr, attr) {// 去掉重復數組chineseList 只包含中文開頭的this.chineseList = [...arr].filter(x => [...attr].every(y => y.value !== x.value));return this.chineseList},

4.合并中文和字母進行格式化，采用自定義函數mergeValue

// 合并字母開頭和漢字mergeValue(arr, attr) {arr.push.apply(arr, attr)let key = 'ch'var map = {}, dest = [];for (var i = 0; i < arr.length; i++) {var ai = arr[i];// console.log(arr[i].ch)// console.log(map[ai[key]])if (!map[ai[key]]) {dest.push({ch: ai[key],data: ai.data});map[ai[key]] = ai;// console.log('data:' + JSON.stringify(map[ai[key]]))} else {for (var j = 0; j < dest.length; j++) {var dj = dest[j];if (dj.ch == ai[key]) {dj.data.push.apply(dj.data, ai.data)break;}}}}return dest;console.log('dest: ' + JSON.stringify(dest))},

5.在初始化函數中再對得到的字母和漢字開頭的結構化數組進行重新排序

// mailList 初始化init() {this.mailClassification()let data = []data = this.sortMailData(this.mailData)this.mailData.push.apply(data, this.normalList)this.mailData.forEach(item => {this.mailLetter.push(item.ch)})} sortMailData(arr) {const propComparator = (propName) =>(a, b) => a[propName].toLowerCase() == b[propName].toLowerCase() ? 0 : a[propName].toLowerCase() < b[propName].toLowerCase() ? -1 : 1arr.sort(propComparator(`ch`));console.log('arr: ' + JSON.stringify(arr))return arr// console.log(JSON.stringify(this.mailData))},

最終完成，可以完成特殊字符開通的分類

---

還有些問題的地方：因為點擊右側索引使通訊錄滑動的時候我設置的是動態id進行頁面滾動，所以當點擊'#'的時候會報錯。

資源存放：仿微信H5通訊錄根據js文件中的內容動態生成通訊錄內容，可搜索-互聯網文檔類資源-CSDN下載

總結

以上是生活随笔為你收集整理的H5页面制作通讯录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。