前端 html h5 移动端 手机端 仿ios左滑删除效果

实现功能：左滑列表项（<li class="route-item" ></li>），出现删除按钮(<div class="removeJs">删除</div>)。

js部分的代码如下：

window.addEventListener('load',function(){
    var initX;
    var moveX;
    var X = 0;
    var objX = 0;
    var width=$(".removeJs").width();//按钮的宽度(removeJs修改为按钮的className)
    var liClassName=".route-item";//li的className(route-item修改为li的className)
    $("body").on("touchstart",liClassName,function (event) {
        var obj=this;
            initX = event.targetTouches[0].pageX;
            objX =(obj.style.WebkitTransform.replace(/translateX(/g,"").replace(/px)/g,""))*1;
        if( objX == 0){
            $("body").on('touchmove',liClassName,function(event) {
                // event.preventDefault();
                var obj=this;
                    moveX = event.targetTouches[0].pageX;
                    X = moveX - initX;
                    if (X > 0) {
                        obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                    }
                    else if (X < 0) {
                        var l = Math.abs(X);
                        obj.style.WebkitTransform = "translateX(" + -l + "px)";
                        if(l>width){
                            l=width;
                            obj.style.WebkitTransform = "translateX(" + -l + "px)";
                        }
                    }
            });
        }
        else if(objX<0){
            $("body").on("touchmove",liClassName,function (event) {
                // event.preventDefault();
                var obj=this;
                    moveX = event.targetTouches[0].pageX;
                    X = moveX - initX;
                    if (X > 0) {
                        var r = -width + Math.abs(X);
                        obj.style.WebkitTransform = "translateX(" + r + "px)";
                        if(r>0){
                            r=0;
                            obj.style.WebkitTransform = "translateX(" + r + "px)";
                        }
                    }
                    else {     //向左滑动
                        obj.style.WebkitTransform = "translateX(" + -width + "px)";
                    }
            });
        }
    })
    $("body").on("touchend",liClassName,function (event) {
        var obj=this;
            objX =(obj.style.WebkitTransform.replace(/translateX(/g,"").replace(/px)/g,""))*1;
            if(objX>-width/2){
                obj.style.WebkitTransform = "translateX(" + 0 + "px)";
            }else{
                obj.style.WebkitTransform = "translateX(" + -width + "px)";
            }
    })
})

ps：实际项目中，只需修改如下两行代码即可：

var width=$(".removeJs").width();
var liClassName=".route-item";

 注意：touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动，如果设置了e.preventDefault()，那么列表将无法上下滚动。

ps:

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

　　touchend事件：当手指从屏幕上离开的时候触发。

　　touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。