前端 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事件：當系統停止跟蹤觸摸的時候觸發。關於這個事件的確切出發時間，文檔中並沒有具體說明，咱們只能去猜測了。