js移动端向左滑动出现删除按钮

最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。
下面是我后来实现后的代码，其实就是用了原生js的touch事件，再结合触摸点的坐标来判断左滑和右滑，

    

        
侧滑显示删除按钮1删除
        
侧滑显示删除按钮2删除
        
侧滑显示删除按钮3删除
    

zepto

function addsc(tname,naclass,naju,nafu,nazi){
      var expansion=null; 
    tname.each(function(event){
      var x, y, X, Y, swipeX, swipeY;

    //获取每一个滑块的滑动距离
    $(this).on("touchstart",function(event){
       x = event.changedTouches[0].pageX;
       y = event.changedTouches[0].pageY;
       swipeX = true;
       swipeY = true;
//     console.log("x"+x+"y"+y)
       if(expansion){ 
        if($(this).is(naclass)){ $(this).removeClass(naclass); }
        else{ $(this).parents(nafu).siblings().children(nazi).removeClass(naclass); }
      }  

     })
    
    $(this).on("touchmove",function(event){
           X = event.changedTouches[0].pageX;
         Y = event.changedTouches[0].pageY;
         // 左右滑动
         if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
            event.stopPropagation();
            if(x-X> naju){  //左滑 
                event.preventDefault();
                $(this).addClass(naclass)
                expansion = true;
            }
            
            if(X-x>naju){//右滑
                event.preventDefault();
          $(this).removeClass(naclass)
          expansion = " ";
            }
              swipeY = false;
         }
         
        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            swipeX = false;
        }        
         
    })
    
})


 }

//调用滑动模块
if($(".fh701").length>0){
     $(".fh701").on("touchstart  myCrrrg ",function(event){
       addsc($(".fh628-dv .soo29-dow .soo29-daw  a"),"swipeleft",25,".soo29-daw","a");
       event.stopPropagation();
   }).triggerHandler("myCrrrg")
 
    
}

$("body").on("touchstart", function(e) {
    e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
    e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;
 
    if ( X > 0 ) {
        alert("left 2 right");
    }
    else if ( X < 0 ) {
        alert("right 2 left");
    }
    else if ( Y > 0) {
        alert("top 2 bottom");
    }
    else if ( Y < 0 ) {
        alert("bottom 2 top");
    }
    else{
        alert("just touch");
    }
});

http://www.qdfuns.com/notes/18161/e2f2dc4b5f307375757fc562e4b33788.html

原文网址http://www.cnblogs.com/tnnyang/p/6429730.html