减少不必要造轮子的过程，于是在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()了。
隐藏的太深了，文档不一点点翻，都找不到这么一句。