Framework7 无限滚动

心系少时言 等一不归人

//*将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 += '
这是新添加的元素
';
        }
        // *添加新条目*
        $$('.dynamic').append(html);
        // *更新最后加载的序号*
        lastIndex = $$('.dynamic_list').length;
    }, 1000);
});

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

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