JS Implementierung der Index-Schiebeeffekte und der Schiebeanker-Effekte für Adressbücher

Es wurde nur die Implementierung durchgeführt. Es wurde nicht über die Performance-Optimierung nachgedacht. Daher war die Implementierung besonders langsam.

Das erste Mal wird auf der rechten Indexleiste des Adressbuchs gegriffen und gescrollt, bis der entsprechende Buchstabe erreicht ist, und dann wird auf den Ankerpunkt des entsprechenden Buchstabs gesprungen.

Denkweise:Der touchmove-Event wird überwacht, um clientX und clientY zu erhalten, die dann an elementFromPoint übergeben werden. Nachdem das Element erhalten wurde, kann click() ausgeführt werden.

Hier könnte ein Problem auftreten, nämlich wenn es in deiner Seite Schattenboxen oder ähnliche Oberflächenelemente gibt, dann solltest du sie pointer-events:none, selbst wenn der display:none dieses Elements ist, hat das keine Wirkung, Praktizieren führt zum Verständnis. Versucht es aus.

index ist die ID des Indexdiv

$("#index").get(0).addEventListener('touchmove',function(event){
   var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
   a.click();
  });

Der Zweite ist, dass ich will, dass ein Buchstabe blinkt, wenn die Seite auf die Position eines Buchstaben in der Seite gescrollt wird.

Denkweise:Der scroll-Event wird beobachtet, und elementFromPoint wird verwendet, um den gewünschten Elementpositionselement zu erhalten, um dann die Anzeigeeffekte auszuführen.

ps: Es wird weui verwendet

$("window").scroll(function(){
  var a = document.elementFromPoint(0,0);
  if($(a).hasClass("weui_cells_title"))
  {
   $(".weui_toast_content_my").html($(a).attr("name"));
   $("#toast").show(0);
   $("#toast").slideUp();300);
  }
 });

Gut, das ist alles.

Mit diesem Artikel über die js-Implementierung der Index-Schiebeeffekte und der Anker-Schiebeeffekte für das Adressbuch habe ich alles, was ich zu teilen habe, geteilt. Ich hoffe, das gibt euch eine Referenz und ich hoffe, ihr unterstützt das Lärmtutorial.