Framework7 无限滚动

作者: Neuro_annie | 来源:发表于2017-04-11 09:02 被阅读568次
    Genius only means hard-working all one's life.
    //*将Dom7导出到本地变量*
    var $$ = Dom7;
    //*初始化应用程序*
    var myApp = new Framework7();
    //*初始化视图*
    var mainView = myApp.addView(".view-main",{
        domCache: true
    });
    
    //*无限滚动*
    // *加载flag*
    var loading = false;
    // *上次加载的序号*
    var lastIndex = $$('dynamic_list').length;
    // *最多可加载的条目*
    var maxItems = 100;
    //* 每次加载添加多少条目*
    var itemsPerLoad = 3;
    // *注册'infinite'事件处理函数*
    $$('.infinite-scroll').on('infinite', function () {
        // *如果正在加载,则退出*
        if (loading) return;
        //* 设置flag*
        loading = true;
        //* 模拟1s的加载过程*
        setTimeout(function () {
            // *重置加载flag*
            loading = false;
            if (lastIndex >= maxItems) {
                // *加载完毕,则注销无限加载事件,以防不必要的加载*
                myApp.detachInfiniteScroll($$('.infinite-scroll'));
                // *删除加载提示符*
                $$('.infinite-scroll-preloader').remove();
                return;
            }
            // *生成新条目的HTML*
            var html = '';
            for (var i = lastIndex; i <= lastIndex + itemsPerLoad; i++) {
                html += '<div class='dynamic_list'>这是新添加的元素</div>';
            }
            // *添加新条目*
            $$('.dynamic').append(html);
            // *更新最后加载的序号*
            lastIndex = $$('.dynamic_list').length;
        }, 1000);
    });
    

    其中'.dynamic'类为包裹将要添加的元素的父元素,'.dynamic_list'类为将要添加的元素的同胞元素。

    需要在page-content类中再添加infinite-scroll类。

    相关文章

      网友评论

      本文标题:Framework7 无限滚动

      本文链接:https://www.haomeiwen.com/subject/pelyattx.html