JQuery Mobile 是一款流行的移動端 UI 插件,但是在使用過程中我們也會遇到一些 bug。下面列舉了一些常見的 JQuery Mobile bug,并提供了相應的解決方法。
1. 頁面過度效果(Page transition)無法正常工作
當使用一些較老版本的瀏覽器時,頁面過度效果可能無法正常工作。此時可以考慮在調用changePage()
方法時,加上data-transition="none"
的參數來關閉頁面過渡動畫。
$.mobile.changePage($('pageSelector'), { transition: 'none' });
2. 滾動條在列表中出現問題
在某些情況下,JQuery Mobile 可能會在列表中添加無法滾動的滾動條或者過長的滾動條。可以使用 CSS 樣式覆蓋掉默認的滾動條樣式,還可以手動指定滾動區域的高度。
.ui-scrollbar { display: none; } .ui-listview { overflow: auto !important; height: 200px !important; }
3. select 標簽無法觸發選中事件
在 Android 4.4 以下的系統中,select 標簽在選中選項時可能無法觸發選中事件。可以通過在 select 標簽后面添加一個不可見的 input 標簽,并通過 JS 綁定事件來解決這個問題。
$('input[type="hidden"]').change(function() { var selectedValue = $(this).val(); // do something }); $('select').change(function() { $(this).next('input[type="hidden"]').val($(this).val()).change(); });
除了以上列舉的幾個常見問題,JQuery Mobile 還有其他可能的 bug,這時候我們需要使用開發者工具進行調試,進行相應的解決。