Heim > WeChat-Applet > WeChat-Entwicklung > Wie man damit umgeht, dass WeChat das Herunterscrollen zum Anzeigen von URLs verbietet

Wie man damit umgeht, dass WeChat das Herunterscrollen zum Anzeigen von URLs verbietet

小云云
Freigeben: 2018-01-29 17:18:55
Original
2215 Leute haben es durchsucht

Sie können die URL anzeigen, wenn Sie auf WeChat zugreifen. Dies ist eine der Sicherheitsrichtlinien von WeChat und ein benutzerfreundliches interaktives Erlebnis. In diesem Artikel wird hauptsächlich beschrieben, wie Sie die Pulldown-Anzeige von URLs auf WeChat deaktivieren können Ich kann darauf verweisen. Ich hoffe, es hilft allen.

Wirkungsprinzip:

Der elastische WeChat-Dropdown-Effekt ist tatsächlich eine Funktion des Browsers selbst, und der Fokus ist eine Manifestation des Bildlaufwerts

Verarbeitungsstrategie:

1. Touchmove-Ereignisse auf der mobilen Seite direkt verbieten

Diese Strategie ist allgemein anwendbar, wenn die Seite nur einen Bildschirm hat und dies auch tut kein Pulldown erforderlich;


var touch1 = function(){
  document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) { 
    e.preventDefault(); 
  });
}
Nach dem Login kopieren

Nachteile: Bei Bildschirmen unterschiedlicher Größe muss berücksichtigt werden, dass der Inhalt auf einem Bildschirm angezeigt werden kann, andernfalls der Inhalt auf 2+ Bildschirmen ist nicht lesbar;

2. Deaktivieren Sie Touchmove und beurteilen Sie, ob die Scroll-Position den oberen Rand erreicht, wenn Sie nach unten ziehen <= 10 Deaktivieren Sie das Touchmove-Ereignis und betrachten Sie die Situation, in der zuerst nach oben und dann nach unten gezogen wird. Überwachen Sie daher das Touchend-Ereignis und berechnen Sie die höchste Punktposition in einem Touch-Ereignisstrom, um

<🎜 zu bestimmen >
Nachteile: Es gibt Lücken im ersten Touchmove und es gibt auch Lücken im Touchmove-Prozess

var touch2 = function () {
  var lastY;//最后一次y坐标点
  var betterY;//每次touch最高点
  document.querySelector(‘body‘).addEventListener(&#39;touchstart&#39;, function(event) {
    lastY = event.originalEvent.changedTouches[0].clientY;
    betterY = lastY;
  });
  document.querySelector(‘body‘).addEventListener(&#39;touchmove&#39;, function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    if(y > betterY){
      betterY = y;
    }
    var st = document.body.scrollTop; //滚动条高度
    if (y >= lastY && st <= 10) {
      lastY = y;
      event.preventDefault();
    }
    lastY = y;
  });
  document.querySelector(‘body‘).addEventListener(&#39;touchend&#39;, function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    var st = document.body.scrollTop; //滚动条高度
    if(y < betterY && st <= 10){
      event.preventDefault();
    }
  });
}
Nach dem Login kopieren
3 >Auf 0 zurücksetzen, wenn die Höhe der Bildlaufleiste kleiner als 0 ist, und die Rückkehr zur oberen Position erzwingen

Nachteil: Es wird ein Dropdown-Menü angezeigt URL-Splash-Screen-Phänomen


Verwandte Empfehlungen:

var touch3 = function () {
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top <= 0){
      document.body.scrollTop = 0;
    }
  }
}
Nach dem Login kopieren

http in node.js Einführung in Module und URL-Module


Ausführliche Erklärung der Änderung der Stammadresse von url() in Laravel

Wie PHP chinesische Zeichen in URL analysiert

Das obige ist der detaillierte Inhalt vonWie man damit umgeht, dass WeChat das Herunterscrollen zum Anzeigen von URLs verbietet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage