相關閱讀:微信支付如何實現(xiàn)內置瀏覽器的H5頁面支付
情景再現(xiàn):
正當開心地收拾東西準備下班的時候,測試部的姑娘跑過來提了一個bug: “在iphone下,點擊下拉框出現(xiàn)頁面亂跳轉現(xiàn)象,安卓機并沒有這個問題。而跳轉的頁面剛好是底部菜單的幾個頁面。”由于項目比較急,小編只能乖乖留下解決問題。再次測試之后,小編逐一排查了可能性原因(正式版和測試版代碼不一致,頁面HTML代碼錯亂,css代碼錯誤),但都未能解決問題。一個簡單的select,怎么就出現(xiàn)問題了呢?百思不得其解。(至今也沒有找到問題根源)
找不出問題根源,只能先看看有沒有解決方案。經(jīng)過多次調試,捕獲select動作,找到了一個解決方案。原理很簡單:利用div來模擬select。
解決方案:
思路也是比較清晰的。頁面中有兩個html結構,一是select代碼照常寫(一開始處于隱藏狀態(tài)display:none),二是被模擬的div(一開始處于顯示狀態(tài)),當點擊div時出現(xiàn)select下拉框,同時將讀取的option值給被模擬的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(); //調用插件即可 }
PS:bootstrap滾動監(jiān)聽在iPhone微信內置的瀏覽器上有時有效果有時沒有
bootstrap寫了一個affix的附加導航(導航條在左邊,數(shù)據(jù)在右邊,分成的兩列),在安卓手機的微信內置瀏覽器上滾動監(jiān)聽是正常的,但是在iPhone微信的內置瀏覽器上有時可以監(jiān)聽有時不能監(jiān)聽,這是什么原因?
解決方案:
出現(xiàn)這個原因是用HTML5寫的網(wǎng)頁,iPhone沒有及時響應導致的,最好用jQuery mobile。