js通訊錄效果，你見過麼

eternalshallow發表於2017-12-14
JS

最近有一個需求，要寫一個通訊錄效果的聯絡人列表效果，相信這個大家都不陌生，當然當我寫到一半的時候，同事告訴我這個是android和IOS的需求，，，十分鬱悶，但是本人求知慾甚是強烈，就用jq實現了這個功能。

現在我們先來看一下這個功能演示，這個實現了基本的功能，不過一些過渡的動畫沒有寫上，後期會補上，大家想用的話，自行不上這個過渡效果：

通訊錄效果演示.gif

首先我們來看一下html的佈局，這個佈局很簡單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Title</title>
    <style>
    *{padding: 0;margin: 0}
html,body{
    width: 100%;height: 100%;box-sizing: border-box;
    font-size: 62.5%;
}
a,ul,li{
    list-style: none;
    text-decoration: none;
}
.slider{width: 100%;height: 100%;position: relative ; padding-top: 1.5rem }
.sliderNav{width: 10%;position: fixed;right: 0;height: 100%;text-align: center;top: 1.5rem;}
.slider>h2{
    font-size: 2rem;
    line-height: 3.5rem;
    padding-left: 1.5rem;
}
.sliderNav>li>a{
    font-size: 2rem;
    color: #18a2ff;
}
.slider-content{
    position: absolute;
    left: 1.5rem;
    width: 85%;
}
.slider-content>div{
    font-size: 30px;
    padding-left: 1.5rem;
    height: 50px;
    line-height: 50px;
    background-color: #7f8393;
}
.slider-content>div:nth-child(2n+1){
    background-color: #bff3de;
}
.slider-content>div:nth-child(2n){
    background-color: #7f8393;
}

.slider-content>ul{
    padding-top: 0.5rem;
}
.slider-content>ul>li{
    line-height:3rem;
}
    </style>
    <script src="jquery.min.js"></script>
    <script src="codeList.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div class="slider" id="slider">
    <h2 >邀請的好友列表</h2>
    <div class="slider-content" id="sliderContent"></div>
    <ul class="sliderNav" id="sliderNav"></ul>
</div>
</body>
<script>

</script>
</html>
複製程式碼

鑑於檔案的太多，引入的檔案部分我會以連結的形式，大家可以跳轉頁面，下載相應的部分

  1. 引入一個jquery檔案
  2. 變數 的引入，其中需要引入一個 字元的Unicode編碼範圍為19968至40869
  3. 對應的漢字轉碼 4.列表顯示的資料展示

111111111111111111111.png

相關連結請跳轉此處

http://www.jianshu.com/p/fe5f32f5acfb
複製程式碼

2016121411540catFish.jpg
有了以上的條件，我們來看js實現部分

/**
 * Created by Administrator on 2017/1/5.
 */

$(function () {
    var obj = getInviterFirst(inviter);
    getSliderNav(obj.inviterFirst);
    console.log(obj.sortInviter);
    getSliderContent(obj.sortInviter);
});
function getSliderContent(object) {
    var html = '';
    var _li_html = '';
    for(var i in object){
        console.log(i);
        for (var j = 0 ; j < object[i].length; j++){
            _li_html+='<li>'+object[i][j]+'</li>';
        }
        html += '<div id='+i+'><span>'+i+'</span></div><ul >'+_li_html+'</ul>';
        _li_html = '';
    }
    $('#sliderContent').html(html);
}
/**
 * 字母排序
 * @param a
 * @param b
 * @returns {number}
 */
function mySorter(a, b){
    if (/^\d/.test(a)^/^\D/.test(b)) return a>b?1:(a==b?0:-1);
    return a>b?-1:(a==b?0:1);
}
/**
 * 獲取通訊錄右側的索引
 * @param array
 */
function getSliderNav(array) {
    var html = '';
    for (var i = 0; i < array.length ; i ++){
        html+='<li ><a href=#'+array[i]+'>'+array[i]+'</a></li>';
    }
    $('#sliderNav').append(html);
    $('.sliderNav li').css('height',($('.sliderNav').height()-35)/array.length);
    $('.sliderNav li').css('line-height',($('.sliderNav').height()-35)/array.length+'px');

}
/**
 * 獲取所有資料包含的首字母，並且去重，按照字母順序進行排序,並將資料按照首字母進行分類
 * @param arr
 * @returns {*|Array.<T>}
 */
function getInviterFirst(arr){
    var objObj = {};
    var array = [];
    var objArr = [];
    for (var i = 0 ; i < arr.length ; i ++){
        array.push(query(arr[i]));
        console.log(query(arr[i]));
        if (!objObj.hasOwnProperty(query(arr[i]))){
            objArr = [];
            objArr.push(arr[i]);
            objObj[query(arr[i])] = objArr;

        }else{
            objArr.push(arr[i]);
        }
    }

    return obj = {
        sortInviter:objObj,
        inviterFirst:(Array.from(new Set(array))).sort(mySorter)
    };
}
/**
 *檢視拼音首字母縮寫
 */
function query(str){
    if(str == "") return;
    var arrRslt = makePy(str);
    return arrRslt[0].toLowerCase().substr(0,1);
}
/**
 * 引數,中文字串
 * 返回值:拼音首字母串陣列
 * @param str
 * @returns {*}
 */
function makePy(str){
    if(typeof(str) != "string")
        throw new Error(-1,"函式makePy需要字串型別引數!");
    var arrResult = new Array(); //儲存中間結果的陣列
    for(var i=0,len=str.length;i<len;i++){
        //獲得unicode碼
        var ch = str.charAt(i);
        //檢查該unicode碼是否在處理範圍之內,在則返回該碼對映漢字的拼音首字母,不在則呼叫其它函式處理
        arrResult.push(checkCh(ch));
    }
    //處理arrResult,返回所有可能的拼音首字母串陣列
    return mkRslt(arrResult);
}

function checkCh(ch){
    var uni = ch.charCodeAt(0);
//如果不在漢字處理範圍之內,返回原字元,也可以呼叫自己的處理函式
    if(uni > 40869 || uni < 19968)
        return ch; //dealWithOthers(ch);
//檢查是否是多音字,是按多音字處理,不是就直接在strChineseFirstPY字串中找對應的首字母
    return (oMultiDiff[uni]?oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968)));
}

function mkRslt(arr){
    var arrRslt = [""];
    for(var i=0,len=arr.length;i<len;i++){
        var str = arr[i];
        var strlen = str.length;
        if(strlen == 1){
            for(var k=0;k<arrRslt.length;k++){
                arrRslt[k] += str;
            }
        }else{
            var tmpArr = arrRslt.slice(0);
            arrRslt = [];
            for(k=0;k<strlen;k++){
                //複製一個相同的arrRslt
                var tmp = tmpArr.slice(0);
                //把當前字元str[k]新增到每個元素末尾
                for(var j=0;j<tmp.length;j++){
                    tmp[j] += str.charAt(k);
                }
                //把複製並修改後的陣列連線到arrRslt上
                arrRslt = arrRslt.concat(tmp);
            }
        }
    }
    return arrRslt;
}
複製程式碼

哈哈，看著這個通訊錄效果雖然比較簡陋但是基本效果還是實現了，大家可以引用在此基礎上進行修改以滿足你們的需求欲，如有疑問請留言或者傳送我的郵箱2372734044@qq.com 不足之處大家儘可以指出來，方便交流探討

今晚加個雞腿.jpg

相關文章