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()了。

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