SUI-mobile起步

減小沒必要要造輪子的過程，因而在APP項目中推動SUI Mobile的使用，主要目的是使用它的一些基本樣式，以及各類封裝好的組件，但並無建立單頁應用。

剛剛開始使用，使用之中遇到一個槽點，記錄一下（主要是SUIMobile的文檔寫的真心不是很友好）。

項目中有一個需求：

直接上圖吧，標籤頁分爲審覈和未審覈，裏面的內容都須要無限滾動加載，因此天然而然的翻到對應文檔無線滾動的地方，「多個標籤頁下的無限滾動

」，而後各類照搬html，後面接着就直接把js也搬上了。

$(document).on("pageInit", function() {
      //多個標籤頁下的無限滾動
      var loading = false;
      // 每次加載添加多少條目
      var itemsPerLoad = 20;
      // 最多可加載的條目
      var maxItems = 100;
      var lastIndex = $('.list-container li')[0].length;
      function addItems(number, lastIndex) {
        // 生成新條目的HTML
        var html = '';
        for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
          html += '<li class="item-content" onClick="alert(1)"><div class="item-inner"><div class="item-title">新條目</div></div></li>';
        }
        // 添加新條目
        $('.infinite-scroll.active .list-container').append(html);
      }
      $(page).on('infinite', function() {
        // 若是正在加載，則退出
        if (loading) return;
        // 設置flag
        loading = true;
        var tabIndex = 0;
        if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
          tabIndex = 0;
        }
        if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
          tabIndex = 1;
        }
        lastIndex = $('.list-container').eq(tabIndex).find('li').length;
        // 模擬1s的加載過程
        setTimeout(function() {
          // 重置加載flag
          loading = false;
          if (lastIndex >= maxItems) {
            // 加載完畢，則註銷無限加載事件，以防沒必要要的加載:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多個無線滾動請自行根據本身代碼邏輯判斷註銷時機
            // 刪除加載提示符
            $('.infinite-scroll-preloader').eq(tabIndex).hide();
            return;
          }
          addItems(itemsPerLoad,lastIndex);
          // 更新最後加載的序號
          lastIndex =  $('.list-container').eq(tabIndex).find('li').length;
          $.refreshScroller();
        }, 1000);
      });
  });

　各類無效，最終各類調試，發現根本問題所在，沒法觸發pageInit這一事件，哭啊，沒法想象的各類折騰，最後實在是沒辦法了，只有把這一行直接刪了，就這麼搞定了。真的，就這樣在不可理喻中把問題解決了。

　但是心有不甘啊，這是爲何呢？明明他的示例都是能夠的，爲何到我這就不行了？等到工做完成之餘，開始從頭翻看他的文檔。

終於，在他的「初始化」這段，發現了這麼一句話：「注意，必須執行初始化方法: $.init()。他會調用 $.initPage 方法初始化頁面組件，而且觸發一個 pageInit 事件，因此請確保在全部的 pageInit 事件綁定以後再調用 $.init() 方法。」

在全部的pageInit事件綁定以後再調用$.init()。

而我老是在DOM加載完成以後，就直接調用$.init()了。

隱藏的太深了，文檔不一點點翻，都找不到這麼一句。