SUI-mobile起步

Posted 2020-09-01 烛火星光

减少不必要造轮子的过程，于是在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()了。

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