專案分享一：在專案中使用 IScroll 所碰到的那些坑

麥舒發表於2015-12-15

最近做了個 WEB APP 專案，用到了大名鼎鼎的 IScroll，滾動的效果的確很贊，但是坑也是特別多，下面總結一下，希望自後來者有幫助。

該專案現已開源在 github 上，https://github.com/ansiboy/ChiTuStore

 

一、 使用 absolute 定位

頂欄和底欄最好不要使用 fixed 定位，應該使用 absolute 定位。我最初使用的是 fixed 定位，頁面從右往左呈現的時候，經常會出現兩個問題：1、頂欄時不時地會消失掉，2、新頁面在移動的過程中，頂欄在第一個頁面頂欄的下方，不是預期中的疊起來。

二、 圖片非同步載入

頁面中，如果包含有圖片的，圖片在載入前與載入後，頁面的大小是不同的，由於頁面的大小發生了變化，必須呼叫 iscroll 的 refresh 方法。但事實，很難知道圖片何時載入完成。必須使用圖片非同步載入，待圖片載入完成後，對頁面進行重新整理。

我使用的方法是：

使用的是圖片替換的方法。先使用 JS 生成一張圖，這張圖片大小，和實際的圖片大小是一致的，這樣子頁面就不會因為沒有圖片而變小了，也就是說，頁面在圖片載前和載入後的長度都是一樣的。從而解決了因為圖片的非同步載入，而導致頁面的大小發生變化，而需要頻繁地重新整理的問題。

三、 輸入框鍵盤的彈出

下面兩幅圖，是鍵盤彈出前後的對比圖，要注意的是，頁面和側邊欄的頂欄都不見了，因為這裡的頂欄用的都是 abstract 定位，在彈出鍵盤時，整個 document 物件，會往上移動。因此兩個頂欄都不見了。但是，側邊欄的頂欄，在鍵盤消失的時候，會重新出現，而頁不會。解決方法是在Input 失去焦點的時候，再滾動一下。

        if (site.env.isIOS) {
            var $input = $(this.node).find('input[type="text"]');
            $input.focusout(function () {
                console.log('input focusout');
                $(document).scrollTop(0);
                $(document).scrollLeft(0);
            });
        }

 

 

四、Click或tap事件的多次點選

在使用 button 按鈕的時候，click 或 tap 事件會多次觸發，具體原因尚不明確。但是，換成了 a 標籤後，貌似沒有出現這個問題了。

五、不要在安卓機上使用

IScroll 在安卓機上使用的效果，並不理想。特別是低版的安卓機，4.0版本。在安卓機上，我使用的都是原生的滾動

小結

總得來說，IScroll 還是非常不錯的，尤其是對於 IOS 系統，更是必用不可。

 

相關文章