WeChat の組み込みブラウザを使用してドロップダウン ボックスをクリックすると、ページがランダムにジャンプします。どうすればよいですか (iphone)。

関連資料: WeChat 決済が組み込みブラウザーを使用して H5 ページ決済を実装する方法

シーン再現:

私が幸せそうに荷物をまとめて仕事を終える準備をしていたとき、テスト部門の女の子がやって来て、バグについて言及しました。「iPhone では、ドロップダウン ボックスをクリックすると、ページがランダムにジャンプします。 Android ではこの問題は発生しません。ページはたまたま下部のメニューから数ページ離れたところにあります。「プロジェクトが緊急であるため、編集者は問題を解決することしかできません。再度テストを行った後、考えられる原因（正式版とテスト版のコードが一致していない、ページのHTMLコードが紛らわしい、CSSコードが間違っている）を一つずつ編集者が確認しましたが、問題は解決しませんでした。 。単純な選択でどうして問題が発生するのでしょうか? (問題の根本は今のところ見つかっていません)

問題の原因が見つからないため、まずは解決策があるかどうかを確認することしかできません。何度もデバッグと選択アクションのキャプチャを繰り返した結果、解決策が見つかりました。原理は簡単です。選択をシミュレートするには div を使用します。

解決策:

アイデアも比較的明確です。ページ内には 2 つの HTML 構造があります。1 つは通常どおりに記述された選択コード (display:none は最初は非表示状態です)、もう 1 つはシミュレートされた div (div をクリックすると最初に表示されます) です。 、選択ドロップダウン ボックスが表示され、同時に読み込みオプション値がシミュレートされた div に与えられ、そのシミュレーション コア コードは VisualSelect.js
からダウンロードできます。

HTML コード

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

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;
} 

js コード

注: この問題は一部の iPhone でのみ発生し、Android スマートフォンでは問題がないため、モデルを決定するのが最善です。

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

追記: ブートストラップのスクロール監視は iPhone WeChat の内蔵ブラウザで動作する場合と動作しない場合があります

Bootstrap は、接辞用に追加のナビゲーションを作成しました (左側にナビゲーション バー、右側にデータがあり、2 つの列に分かれています) Android スマートフォンの WeChat の組み込みブラウザではスクロールして聞くのが通常ですが、 iPhone の WeChat の内蔵ブラウザ 監視できるときとできないときがあります。原因は何ですか?

解決策:

この理由は、iPhone が HTML5 で書かれた Web ページに間に合わないためです。jQuery mobile を使用するのが最善です。