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

隐藏的太深了，文档不一点点翻，都找不到这么一句。