Wenn Sie den integrierten Browser von WeChat verwenden, um auf das Dropdown-Feld zu klicken, springt die Seite nach dem Zufallsprinzip (iPhone Was soll ich tun_jquery).

Verwandte Lektüre: Wie die WeChat-Zahlung die H5-Seitenzahlung mit integriertem Browser implementiert

Szenenwiedergabe:

Gerade als ich glücklich meine Sachen packte und mich auf den Feierabend vorbereitete, kam das Mädchen aus der Testabteilung vorbei und erwähnte einen Fehler: „Auf dem iPhone führt das Klicken auf das Dropdown-Feld dazu, dass die Seite zufällig springt.“ . Android hat dieses Problem nicht. Die Seiten sind nur wenige Seiten vom unteren Menü entfernt. Da das Projekt dringend ist, kann der Editor nur bleiben und das Problem lösen. Nach einem erneuten Test überprüfte der Redakteur nacheinander die möglichen Ursachen (der Code der offiziellen Version und der Testversion sind inkonsistent, der HTML-Code der Seite ist verwirrend und der CSS-Code ist falsch), aber das Problem wurde nicht gelöst . Wie kann bei einer einfachen Auswahl etwas schief gehen? (Die Ursache des Problems wurde bisher nicht gefunden)

Wir können die Ursache des Problems nicht finden und können daher zunächst nur prüfen, ob es eine Lösung gibt. Nach vielem Debuggen und Erfassen der ausgewählten Aktion habe ich eine Lösung gefunden. Das Prinzip ist einfach: Verwenden Sie div, um select zu simulieren.

Lösung:

Die Idee ist auch relativ klar. Es gibt zwei HTML-Strukturen auf der Seite. Eine ist der wie üblich geschriebene Auswahlcode (display:none befindet sich am Anfang im ausgeblendeten Zustand) und die andere ist das simulierte Div (wird am Anfang angezeigt, wenn auf das Div geklickt wird). , ein Auswahl-Dropdown-Feld erscheint und gleichzeitig wird der Leseoptionswert an das simulierte Div übergeben, und sein Simulationskerncode kann von VisualSelect.js
heruntergeladen werden

HTML-Code

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>国股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select> 

CSS-Code

.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
} 

JS-Code

Hinweis: Da dieses Problem nur bei einigen iPhones auftritt, gibt es bei Android-Telefonen kein Problem, daher ist es am besten, das Modell zu bestimmen.

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //调用插件即可
}

PS: Die Bootstrap-Scrolling-Überwachung funktioniert manchmal auf dem integrierten Browser des iPhone WeChat und manchmal nicht

Bootstrap hat eine zusätzliche Navigation für Affix geschrieben (Navigationsleiste links, Daten rechts, unterteilt in zwei Spalten). Auf Android-Telefonen ist es normal, im integrierten Browser von WeChat zu scrollen und zuzuhören Integrierter Browser von WeChat auf dem iPhone Manchmal kann ich überwachen und manchmal nicht. Was ist der Grund?

Lösung:

Der Grund dafür ist, dass das iPhone nicht rechtzeitig auf in HTML5 geschriebene Webseiten reagiert. Verwenden Sie am besten jQuery Mobile.