移动端上下左右滑动事件

浅浅的花香味﹌ 2022-05-15 08:27 340阅读 0赞

注意：要用on方法

$(".activity\_goods").on("touchstart",'.activity\_goods\_left',function(e) \{  
            if (e.cancelable) \{  
                if (!e.defaultPrevented) \{  
                    e.preventDefault();  
                \}  
            \}     
            startX = e.originalEvent.changedTouches\[0\].pageX,  
            startY = e.originalEvent.changedTouches\[0\].pageY;  
        \});  
        $(".activity\_goods").on("touchend", '.activity\_goods\_left',function(e) \{         
            if (e.cancelable) \{  
                if (!e.defaultPrevented) \{  
                    e.preventDefault();  
                \}  
            \}                 
            moveEndX = e.originalEvent.changedTouches\[0\].pageX,  
            moveEndY = e.originalEvent.changedTouches\[0\].pageY,  
            X = moveEndX - startX,  
            Y = moveEndY - startY;  
            // 左滑  
            if (X<0) \{  
                let zix = $('.collection2\_delete').width()-5;  
                $(this).css('margin-left',-zix)  
                $(this).siblings('.collection2\_delete').show()                  
            \}  
            // 右滑  
            else if (X>0) \{  
                $(this).css('margin-left',0)  
                $(this).siblings('.collection2\_delete').hide()  
            \}  
            // 上滑  
            else if (Y<0) \{return\}  
            // 下滑  
            else if (Y>0) \{return\}  
            // 点击  
            else\{return\}  
        \});