相關閱讀：微信支付如何實現(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。

最新評論