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

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

WBOY

リリース： 2016-05-16 15:21:54

オリジナル

2277 人が閲覧しました

シーン再現:

私が幸せそうに荷物をまとめて仕事を終える準備をしていたとき、テスト部門の女の子がやって来て、バグについて言及しました。「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 を使用するのが最善です。