jQuery.ias 流式滑动分页插件

全名:infinite-ajax-scroll

引入

<script src="/jquery.ias.js"></script>

HTML

<div class="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
...
</div>

<div class="pagination">
    <a href="page1.html" class="pre">上一页</a>
    <a href="page3.html" class="next">下一页</a>
</div>

JS

jQuery.ias({
    container: '.container ',
    item: '.item ',
    pagination: '.pagination',
    next: '.next',
    trigger: '查看更多',
    loader: '<div class="pagination-loading"><img src="//www.tianlunvip.com/wp/wp-content/themes/lunone/images/loading.gif" /></div>',
    triggerPageThreshold: 10,    // 请求 10 页数据(当滚动到底部的时候才会请求)
    onRenderComplete: function() {
    ....  加载完成后动作
    }
});

属性

container:分页数据追加的容器

item:分页数据项

pagination:原始分页数据容器,加载数据时被隐藏

next:下一页的链接标签,获取下一页地址

trigger:手动加载时显示的提示文本

loader:加载数据时显示的动画

triggerPageThreshold:自动加载页数,自动加载完后,若还有数据,会变成手动

onRenderComplete:数据加载完成后执行的事件

 

评论

还没有任何评论,你来说两句吧!