light7中标签下实现两个无限滚动

来源：互联网发布：淘宝信誉查询源码编辑：程序博客网时间：2024/06/05 10:58

我在项目中用了light7自带的标签功能，实现点击显示不同的数据，两个不同的数据都是列表，从数据拿值，通过前端做循环显示出来的。如果是一次性从数据库中拿数据的话会导致加载的时间比较长，进而网页加载就会比较慢，所以考虑运用light7的无限滚动功能，先显示10条数据，然后下滑滚动的时候到最低端触发无限滚动事件，到数据库中拿值，这样就解决了加载慢的问题。

因为这个页面是有两个标签的，这样就导致了另外一个问题，那就是无限滚动的事件运用到一个列表中时是OK的，两个列表都要运用时就会有问题了。

解决办法就是在事件中加一个判断就完美解决了，这次的代码有个小瑕疵，就是我没有remove掉加载的div，还是隐藏掉了，不过不影响功能的实现。

html代码：

<div class="content">    <div class="buttons-tab">        <a href="#tab1" class="tab-link active button">tab1</a>        <a href="#tab2" id="tabl2" class="tab-link button">tab2</a>    </div>    <div class="tabs">        <div id="tab1" class="tab active">            <div id="ta1" class="list-block">                <ul class="list-container"></ul>            </div>            <!-- preloader -->            <div class="infinite-scroll-preloader">                <div class="preloader"></div>            </div>        </div>        <div id="tab2" class="tab">            <div id="ta2" class="list-block">                <ul class="list-container"></ul>            </div>            <!-- preloader -->            <div class="infinite-scroll-preloader">                <div class="preloader"></div>            </div>        </div>    </div></div>

js代码：

<script>    var loading = false;    var maxItems = 100;    var itemsPerLoad = 20;    function addItems(number, lastIndex) {        var html = '';        for (var i = lastIndex + 1; i <= lastIndex + number; i++) {            html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';        }        return html;    }    addItems(itemsPerLoad, 0);    var lastIndex = 20;    $(document).on('infinite', '.infinite-scroll',function() {        if($("#tab1").hasClass("active"))        {            // 如果正在加载，则退出            if (loading) return;            // 设置flag            loading = true;            setTimeout(function() {                loading = false;                if (lastIndex >= maxItems) {                    $.detachInfiniteScroll($('.infinite-scroll'));                    $('.infinite-scroll-preloader').css("visibility", "hidden");                    return;                }                $('#ta1').append(addItems(itemsPerLoad, lastIndex));                lastIndex = $('.list-container li').length;            }, 1000);        }        else if($("#tab2").hasClass("active"))        {            // 如果正在加载，则退出            if (loading) return;            // 设置flag            loading = true;            setTimeout(function() {                loading = false;                if (lastIndex >= maxItems) {                    $.detachInfiniteScroll($('.infinite-scroll'));                    $('.infinite-scroll-preloader').css("visibility", "hidden");                    return;                }                $('#ta2').append(addItems(itemsPerLoad, lastIndex));                lastIndex = $('.list-container li').length;            }, 1000);        }    });</script>

阅读全文

0 0