在做左滑刪除的時候，也是在網上找了一些例子，一開始使用的是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();