滚动加载 - AuxUI - 模块化前端UI框架

使用前需要加载element模块，可通过下列方式加载

//加载element模块
auxui(['infinite'], function (){

    //初始化滚动加载插件，默认的 distance 值是 50，表示滚动到距离底部 100 px 的时候会触发加载
    $(document.body).infinite(100);

});

实例

可以在任何div内初始化滚动加载组件，并且一个页面内可以初始化多个

容器容器容器容器容器容器容器容器容器容器容器容器容器容器容器容器容器容器

当用户滚动到页面底部的时候，会在 body 上触发 infinite 事件，监听此事件即可:

var loading = false;  //状态标记
$(document.body).infinite().on("infinite", function() {
    if(loading) return;
    loading = true;
    setTimeout(function() {
        $("#list").append("<p> 我是新加载的内容 </p>");
        loading = false;
    }, 1500);   //模拟延迟
});

注意：因为插件并不知道你是否正在加载，所以只要滚动到距离底部 50px 以内都会触发事件。因此 infinite 事件可能会触发多次。需要自己来控制不要同时进行多个加载，可以参考上面的代码通过一个 loading 标记位来控制。

如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).infinite('destroy') 可以销毁插件。之后你可以再次调用 $(document.body).infinite() 来重新初始化.