美文网首页
京东category侧边栏实现

京东category侧边栏实现

作者: 神奇的少年 | 来源:发表于2017-04-10 17:54 被阅读0次

    先看看效果是怎样的!

    我不会生成gif图,在网上找了个在线生成的但是就是有个水印,有空了去学习一下怎么生成gif哈哈哈


    先看看侧边栏都做了哪些事情,有什么效果?

    • 可滑动(touchmove)
    • 点击其中一个分类时会置顶
    • 如果滑动到无法滑动的限值时再点击其中分类不会置顶

    简单分为这三个需求,然后分析一下如何实现

    • 需要封装一个点击事件,因为click会有约300ms的延迟
    • 需要判断是否已到达最大滑动值,让其点击不再置顶
    • 在还没滑动到最大滑动值时点击,需要移动侧边栏,将当前点击的分类移动到顶部

    那么先看看结构


    看看结构代码

    <div class="jd_layout">
        <!--上图中灰色框框:layout-->
        <div class="jd_category">
            <!--上图中蓝色框框:侧边栏盒子-->
            <div class="jd_category_left">
                <!--上图中红色框框:ul-->
                <ul class="clearFix">
                    <li class="active"><a href="javascript:;">热门推荐</a></li>
                    <li class=""><a href="javascript:;">潮流女装</a></li>
                    <li class=""><a href="javascript:;">品牌男装</a></li>
                    <li class=""><a href="javascript:;">内衣配饰</a></li>
                    <li class=""><a href="javascript:;">家用电器</a></li>
                    <li class=""><a href="javascript:;">电脑办公</a></li>
                    <li class=""><a href="javascript:;">手机数码</a></li>
                    <li class=""><a href="javascript:;">母婴频道</a></li>
                    <li class=""><a href="javascript:;">图书</a></li>
                    <li class=""><a href="javascript:;">家居家纺</a></li>
                    <li class=""><a href="javascript:;">居家生活</a></li>
                    <li class=""><a href="javascript:;">家具建材</a></li>
                    <li class=""><a href="javascript:;">热门推荐</a></li>
                    <li class=""><a href="javascript:;">潮流女装</a></li>
                    <li class=""><a href="javascript:;">品牌男装</a></li>
                    <li class=""><a href="javascript:;">内衣配饰</a></li>
                    <li class=""><a href="javascript:;">家用电器</a></li>
                    <li class=""><a href="javascript:;">电脑办公</a></li>
                    <li class=""><a href="javascript:;">手机数码</a></li>
                    <li class=""><a href="javascript:;">母婴频道</a></li>
                    <li class=""><a href="javascript:;">图书</a></li>
                    <li class=""><a href="javascript:;">家居家纺</a></li>
                    <li class=""><a href="javascript:;">居家生活</a></li>
                    <li class=""><a href="javascript:;">家具建材</a></li>
                </ul>
            </div>
        </div>
    </div>
    

    随便写了下样式,有点丑,不要介意,这里就直接贴代码了

    <style type="text/css">
            html,body{
                height: 100%;
            }
            .jd_layout{
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }
            .jd_category{
                width:100%;
                position: absolute;
                height: 100%;
                /*padding-top: 45px;*/
            }
            .jd_category>.jd_category_left{
                width: 100px;
                height: 100%;
                overflow: hidden;
                float: left;
            }
            .jd_category>.jd_category_left>ul{
                width: 100%;
            }
            .jd_category>.jd_category_left>ul>li{
                width: 100%;
                height: 50px;
                border-right:1px solid #ccc;
                border-bottom:1px solid #ccc;
                background-color: #eee;
            }
            .jd_category>.jd_category_left>ul>li.active{
                border:none;
                background-color: #ffffff;
                color: #e92322;
            }
            .jd_category>.jd_category_left>ul>li.active>a{
                color: #e92322;
            }
            .jd_category>.jd_category_left>ul>li>a{
                display: block;
                width: 100%;
                height: 50px;
                text-align: center;
                line-height:50px;
                font-size:14px;
                color: #000;
            }
        </style>
    

    好了,现在才是重点,开始一步一步实现效果

    (1)获取侧边栏盒子、侧边栏盒子高度、ul、ul高度

    var parentBox=document.querySelector('.jd_category_left');
    var ulBox=parentBox.querySelector('ul');
    var ulHeight=ulBox.offsetHeight;
    var parentHeight=parentBox.offsetHeight;
    

    (2)定义最大和最小Y坐标,后面用于判断滑动限值。定义弹簧效果坐标值

    /*静止状态下的最大Y坐标值*/
    var maxPosition=0;
    /*静止状态下最小的Y坐标值*/
    var minPosition=parentH-ulH;
    /*弹簧效果最大的Y坐标值*/
    var bounceMaxPosition=maxPosition+100;
    /*弹簧效果最小的Y坐标值*/
    var bounceMinPosition=minPosition-100;
    

    (3)到这里,先添加几个公共方法

    1.添加过渡
    2.删除过渡
    3.设置ul移动

    /*添加过渡*/
    var openTransition=function(){
        ulBox.style.transition="all .2s";
        ulBox.style.webkitTransition="all .2s";
    };
    /*移除过渡*/
    var removeTransition=function(){
        ulBox.style.transition="none";
        ulBox.style.webkitTransition="none";
    };
    /*设置偏移*/
    var setTransform=function(distanceY){
        ulBox.style.transform="translateY("+distanceY+"px)";
        ulBox.style.webkitTransform="translateY("+distanceY+"px)";
    }
    

    (4)接下来,要添加touch事件了

    记录点击的时候的坐标
    记录滑动的时候的坐标
    记录距离
    记录上一次touch结束的位置,后面需要累计每次滑动的距离

    var startY=0;
    var moveY=0;
    var distanceY=0;
    var currentY=0;
    

    (5)给ul添加touchstart

    ulBox.addEventListener("touchstart",function(e){
        /*获取起始位置*/
        startY= e.touches[0].clientY;
    });
    

    (6)给ul添加touchmove

        ulBox.addEventListener("touchmove",function(e){
            /*获取当前手指滑动的位置*/
            moveY=e.touches[0].clientY;
            /*计算本次的偏移值*/
            distanceY=moveY-startY;
            /*判断当前抖动的距离,在之前的距离基础,是否已经超出指定的范围*/
            if(currentY+distanceY > bounceMaxPosition){
                console.log("别拉,没啦");
                currentY=bounceMaxPosition;
            }
            else if(currentY+distanceY < bounceMinPosition){
                console.log("别拉,没啦");
                currentY=bounceMinPosition;
            }
            else{
                /*移动过渡*/
                removeTransition();
                /*设置偏移*/
                setTransform(currentY+distanceY);
            }
        });
    

    (7)给ul添加touchend

        ulBox.addEventListener("touchend",function(e){
            /*判断当前的位置是否在静止状态最小Y坐标之外--比它还小*/
            if(currentY+distanceY < minPosition){
                currentY=minPosition;
                /*添加过渡*/
                openTransition();
                /*设置偏移*/
                setTransform(currentY);
            }
            else if(currentY+distanceY > maxPosition){
                currentY=maxPosition;
                /*添加过渡*/
                openTransition();
                /*设置偏移*/
                setTransform(currentY);
            }
            else{
                /*松开手指,结束本次滑动的时候,要将距离存储到变量中*/
                currentY+=distanceY;
            }
        });
    

    (8)现在要给li标签设置索引了,因为要点击

        /*设置li标签的自定义索引*/
        var lis=ulBox.querySelectorAll("li");
        for(var i=0;i<lis.length;i++){
            /*lis[i].setAttribute("index",i);*/
            /*赋值索引*/
            lis[i].index=i;
        }
    

    (9)那么说到点击,在移动端click是由300ms延迟的,上面说到要封装一个tap

        var tap=function (dom,callback) {
            /*1.不能滑动过
            * 2.end与start时间间隔一般在150ms内*/
            var isMove=false;//标记是否滑动过
            var startTime=0;//记录开始触摸的时间
            dom.addEventListener("touchstart",function(e){
                /*记录开始触摸时间--以毫秒做为单位*/
                startTime=Date.now();
            });
            dom.addEventListener("touchmove",function(e){
                isMove=true;
            });
            dom.addEventListener("touchend",function(e){
                if(isMove==false  && Date.now()-startTime <=150){
                    callback && callback(e);
                }
                /*重置标记是否滑动*/
                isMove=false;
            });
        }
    

    (10)调用tap事件

        /*传入父容器,那么可以通过e.target属性来获取当前真正进行响应的子元素--捕获*/
        tap(ulBox,function(e){
            /*清除所有li标签的样式*/
            var activeLi=ulBox.querySelector(".active");
            activeLi.classList.remove("active");
    
            /*拿到所有li标签*/
            var li= e.target.parentNode;
            /*获取li标签的高度*/
            var liH=li.offsetHeight;
    
            /*添加li标签的样式*/
            li.classList.add("active");
    
            /*移动需要先获取当前你所点击的li标签的索引*/
            var index=li.index;
    
            /*判断:如果在之前的移动基础之上(之前偏移的值在点击过后,其实已经包含在点击的偏移值以内) ,再进行当前点击所需要的偏移,如果这个偏移值造成元素在静止状态下Y坐标的最小值以外,那么我们就应该让其Y固定在最小区间位置*/
            if(-index*liH < minPosition){
                currentY=minPosition;
                openTransition();
                setTransform(minPosition);
            }
            /*否则,就按正常方式进行偏移,同时重置currentY的值,以便下次可以正常的滑动*/
            else{
                /*开启过渡*/
                openTransition();
                /*设置偏移*/
                setTransform(-index*liH);
                /*一定要记得一个事情,重置currentY*/
                currentY=-index*liH;
            }
        })
    

    总结:

    • 先让ul能够滑动起来
    • 然后记录距离值(每次累计)
    • 在touch事件中判断是否达到限值
    • 给每个li赋值索引
    • 点击li后设置置顶(设置偏移,负的索引值*li的高度),同时判断是否达到滑动限制,如果达到则不能置顶

    相关文章

      网友评论

          本文标题:京东category侧边栏实现

          本文链接:https://www.haomeiwen.com/subject/lcqeattx.html