Swipe for the next article



  • We need to make sure that the phone can slip into the next article, wordpress, there's a permanent switch. <?php previous_post_link('<a>%link</a>')?>You don't need an axe, you just need to make a life-saving function, how do you do it?



  • https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android The answer to your question is a clean JS with negative functions, so you wouldn't accidentally invent the bike:

    // Вешаем на прикосновение функцию handleTouchStart
    document.addEventListener('touchstart', handleTouchStart, false);  
    // А на движение пальцем по экрану - handleTouchMove      
    document.addEventListener('touchmove', handleTouchMove, false);
    

    var xDown = null;
    var yDown = null;

    function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
    };

    function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
    return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;
    
    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
    // немного поясню здесь. Тут берутся модули движения по оси абсцисс и ординат (почему модули? потому что если движение сделано влево или вниз, то его показатель будет отрицательным) и сравнивается, чего было больше: движения по абсциссам или ординатам. Нужно это для того, чтобы, если пользователь провел вправо, но немного наискосок вниз, сработал именно коллбэк для движения вправо, а ни как-то иначе.
    if ( Math.abs( xDiff ) &gt; Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff &gt; 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else { // Это вам, в общем-то, не надо, вы ведь только влево-вправо собираетесь двигать
        if ( yDiff &gt; 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
    

    };




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2