使用touch实现左滑删除

在做左滑删除的时候，也是在网上找了一些例子，一开始使用的是swiper.js 插件，项目做完了一期，总结的时候终于认清了一个事实，不要相信插件。在不同的手机适配中，没有一款插件是完美的，总会存在各种各样的适配问题。例如：在华为某款手机，左滑删除之后，点击删除弹出背景阴影，但是在手机屏幕总会出现一块深色的长方阴影，找不到原因。

z

/*
 * 滑动列表
 * */
var initX,initY;
var moveX,moveY;
var X = 0;
var objX = 0;
var move = false;
var swipe_width;
function myswiper(){
    $(".payMentDetail_List").on('touchstart',function(event){
        var touchNum = event.originalEvent.changedTouches.length;
        if(touchNum > 1){return};//判断触屏手指个数
        var _Obj = isParentClass(event,"payMentDetail_ListLi");
        var obj =_Obj.Obj;
        swipe_width = obj.children[obj.children.length-1].offsetWidth;
        var objClassName = _Obj.ClassNameExist;//当前滑动的是否是列表
        if(objClassName){ //滑动的是列表中的位置
            initX = event.originalEvent.changedTouches[0].pageX ;
            initY = event.originalEvent.changedTouches[0].pageY ;
            //objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;//判断滑动的方向，向左或者向右
            objX = parseInt(obj.style.left) || 0;
            if(event.target.className.indexOf("js_event_update") > -1
                ||event.target.className.indexOf("js_event_delete") > -1
                ||event.target.className.indexOf("js_event_remove") > -1){//判断是否是修改名称、删除、解除的操作
                return;
            }else if(move == true){
                if(obj.style.left == "" || parseInt(obj.style.left) == 0){
                    $(".payMentDetail_ListLi").css({"left":"0"});
                    move = false;
                    return;
                }
            }
        }else{
            return;
        }
    });

    $(".payMentDetail_List").on('touchmove',function(event) {
        var touchNum = event.originalEvent.changedTouches.length;
        if(touchNum > 1){return};//判断触屏手指个数
        moveY = event.originalEvent.changedTouches[0].pageY;
        var _Obj = isParentClass(event,"payMentDetail_ListLi");
        var obj =_Obj.Obj;
        var isAlreadMove = false;
        var objClassName = _Obj.ClassNameExist;

        $.each($(".payMentDetail_ListLi"),function(i0,v0){
            if(v0.style.left != "" && parseInt(v0.style.left) != 0){
                isAlreadMove = true;
            }
        });
        if( Math.abs(initY - moveY) > 10 && !isAlreadMove){
            return;
        }
        moveX = event.originalEvent.changedTouches[0].pageX;
        X = moveX - initX;
        if (objClassName) {//如果是可以滑动的列表
            event.stopPropagation();//加上这两个，
            event.preventDefault();//加上这两个，
            if(objX == 0){//一开始没有划出
                if (X > 10) {
                    obj.style.left = 0;
                }
                else {
                    var l = Math.abs(X);
                    l = l>swipe_width?swipe_width:l;
                    obj.style.left = -l+"px";
                }
            }else{//开始有划出
                if (X > 0 && X < swipe_width) {
                    var r = -swipe_width + Math.abs(X);
                    if(r > 0){
                        obj.style.left = r+"px";
                    }else{
                        obj.style.left = r+"px";
                    }
                }
            }
        }
    });

    $(".index_body").on('touchcancel touchend',function(event){
        if($(window).scrollTop() > 0){
            icon.show();
        }else{
            icon.hide();
        }
        event.stopPropagation();
        var _Obj = isParentClass(event,"payMentDetail_ListLi");
        var obj =_Obj.Obj;
        var objClassName = _Obj.ClassNameExist;
        if(objClassName){
            if(event.target.className.indexOf("js_event_update") > -1
                ||event.target.className.indexOf("js_event_delete") > -1
                ||event.target.className.indexOf("js_event_remove") > -1){//判断是否是修改名称、删除、解除的操作
                return;
            }
            if(objX < 0){
                obj.style.left = 0+"px";
            }
            objX = parseInt(obj.style.left) || 0;
            if(objX > - (swipe_width / 4)){
                obj.style.left = 0+"px";
            }else{
                obj.style.left = -swipe_width+"px";
                move = true;
                BOOL.index_isSwipe = true;
            }

        }
    });


}
myswiper();