仿手机通讯录

前端入坑纪 10

又是一个阳光明媚的周六，连续两三天的阴雨天气后，难得的放晴，连带心情都好了很多啊！
这回尝试做了个联系人的单页内跳转，希望对大家有启发！

OK，first things first！项目链接

HTML 结构

<p id="tip">您还未添加<strong></strong>姓的联系人</p>
<ul id="libtns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
</ul>
<div class="wrp">
    <ol>
        <li>
            <p id="U">U</p>
            <ul>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
            </ul>
        </li>
        <li>
            <p id="V">V</p>
            <ul>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
            </ul>
        </li>
        <li>
            <p id="W">W</p>
            <ul>
                <li>王曦1</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
            </ul>
        </li>
        <li>
            <p id="X">X</p>
            <ul>
                <li>许毅1</li>
                <li>许毅2</li>
                <li>许毅4</li>
                <li>许毅5</li>
                <li>许毅6</li>
                <li>许毅7</li>
            </ul>
        </li>
        <li>
            <p id="Y">Y</p>
            <ul>
                <li>杨毅1</li>
                <li>杨毅2</li>
                <li>杨毅4</li>
                <li>杨毅5</li>
                <li>杨毅6</li>
                <li>杨毅7</li>
            </ul>
        </li>
        <li>
            <p id="Z">Z</p>
            <ul>
                <li>张成1</li>
                <li>张成2</li>
                <li>张成3</li>
                <li>张成4</li>
                <li>张成5</li>
                <li>张成6</li>
            </ul>
        </li>

    </ol>
</div>

开头的p是用来提示的，后面跟着的ul是用来点击的字母， ol里的每个li代表一个字母分类的姓名。

CSS 结构

        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0
        }
        
         ::-webkit-scrollbar {
            display: none
        }
        
        ul,
        li {
            list-style: none
        }
        
        .wrp {
            background-color: #fefefe;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        
        #libtns {
            position: fixed;
            z-index: 99;
            top: 0;
            bottom: 0;
            right: 0;
            color: #fff;
            width: 25px;
            text-align: center;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            display: -webkit-flex;
            flex-flow: column wrap;
        }
        
        #tip {
            opacity: 0;
            transform: translateY(50px);
            position: fixed;
            background-color: rgba(0, 0, 0, .6);
            border-radius: 3px;
            padding: 6px;
            width: 60%;
            box-sizing: border-box;
            color: #fefefe;
            bottom: 0;
            left: 20%;
            text-align: center;
            transition: all .3s ease-out;
        }
        
        #tip strong {
            margin: 0 3px;
        }
        
        #tip.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        #libtns li {
            text-transform: capitalize;
            font-size: 13px;
            flex: 1;
            width: 25px;
        }
        
        .wrp li p {
            transition: all .3s ease-out;
        }
        
        .active {
            background-color: #ccc;
        }

点击用的字母是通过flex布局的，这样更好的适配屏幕高度。

关键的 JavaScript

        var libtns = document.getElementById("libtns"),
            otip = document.getElementById("tip"),
            timer = "",
            oatg = otip.getElementsByTagName("strong")[0],
            pragfs = document.getElementsByTagName("p");
        // 获取各个id对应的offsetTop高度，存入自定义的scorlHeit中
        for (var i = 0; i < pragfs.length; i++) {
            var sclHetVal = pragfs[i].offsetTop;
            pragfs[i].setAttribute("scorlHeit", sclHetVal);
        }
        libtns.addEventListener("touchstart", function(evt) {
            // 获取点击的字母对应id的p标签
            var oletr = document.getElementById(evt.target.innerText);
            // 每次点击后都要把前一次的计数器清除
            clearTimeout(timer);
            if (oletr) {
                // 变换字母背景的效果
                oletr.className = "active";
                setTimeout(function() {
                    oletr.className = "";
                }, 300);
                // 获取对应字母的高度并滚动至该高度
                var leterHeit = oletr.getAttribute("scorlHeit");
                window.scrollTo(0, leterHeit);
                // 提示效果的取消
                otip.className = "";
            } else {
                // 提示效果
                oatg.innerText = evt.target.innerText;
                otip.className = "active";
                // 1200ms后将提示效果的取消
                timer = setTimeout(function() {
                    otip.className = "";
                }, 1200);

            }

        }, false);

整个效果的关键是获取对应字母屏幕内位置，然后滚动到该位置。已编写了关键的注解，有兴趣的小伙伴，慢慢研究吧！