Lorsque vous utilisez le navigateur intégré de WeChat pour cliquer sur la liste déroulante, la page saute de manière aléatoire (iphone Que dois-je faire_jquery).

Lecture connexe : Comment le paiement WeChat implémente le paiement par page H5 avec le navigateur intégré

Reproduction de scène :

Juste au moment où j'étais en train de préparer mes affaires et de me préparer à quitter le travail, la fille du service de test est venue et a mentionné un bug : "Sur l'iPhone, cliquer sur la liste déroulante fera sauter la page de manière aléatoire. . Android n'a pas ce problème. Et le saut Les pages se trouvent à quelques pages du menu du bas. "Parce que le projet est urgent, l'éditeur ne peut que rester et résoudre le problème. Après avoir retesté, l'éditeur a vérifié une à une les causes possibles (les codes de la version officielle et de la version de test sont incohérents, le code HTML de la page prête à confusion, et le code css est erroné), mais le problème n'a pas été résolu. . Comment quelque chose pourrait-il mal se passer avec une simple sélection ? Je suis perplexe. (La racine du problème n'a pas été trouvée jusqu'à présent)

Nous ne pouvons pas trouver la source du problème, nous pouvons donc d'abord voir s'il existe une solution. Après plusieurs débogages et captures de l'action de sélection, j'ai trouvé une solution. Le principe est simple : utilisez div pour simuler la sélection.

Solution :

L'idée est également relativement claire. Il y a deux structures HTML dans la page. L'une est le code de sélection écrit comme d'habitude (affichage : aucun est à l'état caché au début) et l'autre est le div simulé (affiché au début). , une liste déroulante de sélection apparaît, et en même temps la valeur de l'option de lecture est donnée au div simulé, et son code principal de simulation peut être téléchargé à partir de VisualSelect.js

code HTML

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

code css

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

code js

Remarque : Comme ce problème n'existe que sur certains iPhones, il n'y a aucun problème sur les téléphones Android, il est donc préférable de déterminer le modèle.

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

PS : La surveillance du défilement Bootstrap fonctionne parfois sur le navigateur intégré de l'iPhone WeChat et parfois non

Bootstrap a écrit une navigation supplémentaire pour affixe (barre de navigation à gauche, données à droite, divisées en deux colonnes). Il est normal de faire défiler et d'écouter sur le navigateur intégré de WeChat sur les téléphones Android, mais sur le navigateur intégré. navigateur intégré de WeChat sur iPhone Parfois, je peux surveiller et parfois non. Quelle est la raison ?

Solution :

La raison en est que l'iPhone ne répond pas à temps aux pages Web écrites en HTML5. Il est préférable d'utiliser jQuery mobile.