使用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();