js通讯录效果，你见过麽

最新推荐文章于 2024-04-29 10:39:27 发布

eternal_shallow

最新推荐文章于 2024-04-29 10:39:27 发布

阅读量6k

点赞数 3

本文链接：https://blog.csdn.net/eternal_shallow/article/details/64920597

版权

最近有一个需求，要写一个通讯录效果的联系人列表效果，相信这个大家都不陌生，当然当我写到一半的时候，同事告诉我这个是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>

鉴于文件的太多，引入的文件部分我会以链接的形式，大家可以跳转页面，下载相应的部分

引入一个jquery文件
变量的引入，其中需要引入一个字符的Unicode编码范围为19968至40869
对应的汉字转码
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

eternal_shallow

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
js通讯录效果，你见过麽

最近有一个需求，要写一个通讯录效果的联系人列表效果，相信这个大家都不陌生，当然当我写到一半的时候，同事告诉我这个是android和IOS的需求，，，十分郁闷，但是本人求知欲甚是强烈，就用jq实现了这个功能。现在我们先来看一下这个功能演示，这个实现了基本的功能，不过一些过渡的动画没有写上，后期会补上，大家想用的话，自行不上这个过渡效果：通讯录效果演示.gif首先我们来看一下html的布局，这
复制链接

扫一扫