首页 > 代码库 > SUI-mobile起步

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

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

 

SUI-mobile起步