Apabila menggunakan penyemak imbas terbina dalam WeChat untuk mengklik pada kotak lungsur, halaman melompat secara rawak (iphone Apa yang perlu saya lakukan_jquery

Bacaan berkaitan: Cara pembayaran WeChat melaksanakan pembayaran halaman H5 dengan penyemak imbas terbina dalam

Penghasilan semula adegan:

Sebaik sahaja saya gembira mengemas barang dan bersiap untuk keluar dari kerja, gadis dari bahagian ujian datang dan menyebut pepijat: "Pada iPhone, mengklik kotak lungsur akan menyebabkan halaman melompat secara rawak . Android tidak mempunyai masalah ini Dan lompatan Laman berlaku hanya beberapa halaman dari menu bawah "Oleh kerana projek itu mendesak, editor hanya boleh tinggal dan menyelesaikan masalah. Selepas menguji sekali lagi, editor menyemak sebab yang mungkin satu demi satu (kod versi rasmi dan versi ujian tidak konsisten, kod HTML halaman mengelirukan, dan kod css salah), tetapi masalahnya tidak diselesaikan . Bagaimanakah sesuatu boleh berlaku dengan pilihan mudah saya hairan. (Punca masalah belum ditemui setakat ini)

Kami tidak dapat mencari punca masalah, jadi kami hanya boleh melihat jika ada penyelesaian terlebih dahulu. Selepas banyak kali menyahpepijat dan menangkap tindakan pilih, saya menemui penyelesaian. Prinsipnya mudah: gunakan div untuk mensimulasikan pilih.

Penyelesaian:

Idea ini juga agak jelas. Terdapat dua struktur HTML dalam halaman Satu ialah kod pilih yang ditulis seperti biasa (paparan: tiada dalam keadaan tersembunyi pada permulaan), dan satu lagi adalah div simulasi (dipaparkan pada permulaan). , kotak lungsur pilih muncul, dan pada masa yang sama nilai pilihan baca diberikan kepada div simulasi, dan kod teras simulasinya boleh dimuat turun daripada VisualSelect.js

kod html

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

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

kod js

Nota: Memandangkan masalah ini hanya wujud pada sesetengah iPhone, tiada masalah pada telefon Android, jadi lebih baik untuk menentukan modelnya.

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

PS: Pemantauan menatal Bootstrap kadangkala berfungsi pada penyemak imbas terbina dalam iPhone WeChat dan kadangkala tidak

Bootstrap menulis navigasi tambahan untuk imbuhan (bar navigasi di sebelah kiri, data di sebelah kanan, dibahagikan kepada dua lajur Adalah perkara biasa untuk menatal dan mendengar pada penyemak imbas terbina dalam WeChat pada telefon Android, tetapi pada pelayar terbina dalam WeChat pada iPhone Kadang-kadang saya boleh memantau dan kadang-kadang saya tidak boleh.

Penyelesaian:

Sebabnya ialah iPhone tidak bertindak balas tepat pada masanya ke halaman web yang ditulis dalam HTML5 Sebaiknya gunakan mudah alih jQuery.