Einführung in die Funktion von JS zum Realisieren von Pull-up und Slide-down auf dem mobilen Endgerät

Berühren Sie den Bildschirm mit Ihrem Finger und berechnen Sie mithilfe von Touchstart und Touchend die Hin- und Herbewegungsstrecke, um festzustellen, ob er nach oben oder nach unten rutscht. Als nächstes werde ich Ihnen anhand des Beispielcodes die Funktion zum Beurteilen der Pull-Up- und Slide-Down-Funktionen des js-Mobilterminals vorstellen. Interessierte Freunde sollten einen Blick darauf werfen

1. Berühren Sie den Bildschirm Verwenden Sie Touchstart und Touchend, um mit Ihrem Finger die vordere und hintere Gleitstrecke zu berechnen und zu beurteilen, ob es nach oben oder unten geht.

2. Der Unterschied zwischen Abstand in js: pageY, clientY und offsetY:

OffsetY: Offset-Abstand relativ zum übergeordneten Knoten.

clientY: Relativ zum Browser wird der Scrollradabstand nicht berücksichtigt.

pageY: Relativ zum Browser wird in diesem Beispiel die Scrolldistanz des Rades verwendet, pageY wird zum Aufzeichnen der Position -startY beim Berühren des Bildschirms und zum Aufzeichnen von -endY verwendet, wenn es endet werden subtrahiert, um das Positive oder Negative zu bestimmen. Bewegt es sich nach oben oder unten?

3. touchstart hat das touches-Attribut, touchend hat das changesTouches-Attribut und die beiden Attribute enthalten pageY- bzw. pageX-Informationen.

//滑动处理 
    var startX, startY; 
    document.addEventListener('touchstart',function (ev) { 
      startX = ev.touches[0].pageX; 
      startY = ev.touches[0].pageY; 
    }, false); 
    document.addEventListener('touchend',function (ev) { 
      var endX, endY; 
      endX = ev.changedTouches[0].pageX; 
      endY = ev.changedTouches[0].pageY; 
      var direction = GetSlideDirection(startX, startY, endX, endY); 
      switch(direction) { 
        case 0: 
            alert("无操作"); 
          break; 
        case 1: 
          // 向上 
          alert("up"); 
          break; 
        case 2: 
          // 向下 
          alert("down"); 
          break; 
 
        default: 
      } 
    }, false);

4.

function GetSlideDirection(startX, startY, endX, endY) { 
      var dy = startY - endY; 
      //var dx = endX - startX; 
      var result = 0; 
      if(dy>0) {//向上滑动 
        result=1; 
      }else if(dy<0){//向下滑动 
        result=2; 
      } 
      else 
      { 
        result=0; 
      } 
      return result; 
    }

Das obige ist der detaillierte Inhalt vonEinführung in die Funktion von JS zum Realisieren von Pull-up und Slide-down auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!