仿qq会话列表滑动效果

一、功能分析

qq会话列表可以向左滑动，然后出现删除按钮

二、知识点

touch事件，css3的transform属性

三、实现思路

为每个列表项绑定touch事件，计算touch移动的距离，在touchmove事件中实现滑动，在touchend中判断touch移动的距离，根据距离大小判断删除按钮是否弹出

四、js代码

// 左滑列表项，删除按钮出现，右滑消失
window.onload = function(){
    //获取rem的值
    sRem = document.querySelector('html').style.fontSize;
    sRem = parseInt(sRem);
    var items = document.querySelectorAll('.item');

    var deletes = document.querySelectorAll('.delete');
    //给每个Li绑定滑动事件
    var startX = 0,moveX = 0,distanceX = 0;
    
    var translateX = 0;

    var flag = 0;

    var target ;//记录当前滑动的列表项
    items.forEach(function(v,i){

        v.addEventListener('touchstart',function(e){
            startX = e.touches[0].clientX;


            //当操作下一行列表项的时候，把上一次操作元素恢复原来的位移
            if(target !== this && target){
                target.style.transform = 'translateX(0rem)';
                target.style.webkitTransform = 'translateX(0rem)';
            }

        })
        v.addEventListener('touchmove',function(e){
            moveX = e.touches[0].clientX;
            
            distanceX = (moveX - startX)/sRem;
                //在起始位置只能向左移动
                if(translateX == 0 && distanceX < 0){

                    transX(this,distanceX);
                    

                }
                //在最左端的时候，只能向右移动
                if(translateX == -4 && distanceX > 0){
                    distanceX += -4;
                    transX(this,distanceX);
                    
                }
            
                
        })
        v.addEventListener('touchend',function(e){
            //点击删除按钮时，避免执行touch事件
            deletes.forEach(function(v,i){
                if(v == e.target){
                    flag = 1;
                }
            })
            if(flag){
                flag = 0 ;
                return;
            }
            //移动向左超过一半，就完全滑动到左边
            if(distanceX < -2 ){
                v.style.transform = 'translateX (' + (-4) + 'rem)';
                v.style.webkitTransform = 'translateX(' + (-4) + 'rem)';
                translateX = -4;
                
            }
            //移动向右超过一半，就完全滑动到起始位置
            if(distanceX >= -2){
                v.style.transform = 'translateX (' + 0 + 'rem)';
                v.style.webkitTransform = 'translateX(' + 0 + 'rem)';
                translateX = 0;
            }

            target = this;
            startX = 0;
            moveX = 0 ;
            distanceX = 0 ;
        
        })
    })

    //列表项位移函数
    function transX(v,x){
    //限制向左滑动的最大距离    
                if(x <= -4){
                    x = -4;
                    
                }
    //限制向右滑动的最大距离
                if(x >= 0){
                    x = 0;
                }

                v.style.transform = 'translateX (' + x + 'rem)';
                v.style.webkitTransform = 'translateX(' + x + 'rem)';    
            
    }
}