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

最新推荐文章于 2020-12-30 06:30:45 发布

ShenJHhappy

最新推荐文章于 2020-12-30 06:30:45 发布

阅读量1.6k

点赞数

分类专栏： light7微信端开发文章标签：问题解决

本文链接：https://blog.csdn.net/shenshen94/article/details/78354163

版权

light7微信端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我在项目中用了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>