Framework7 無限滾動

風暴阿呆發表於2017-12-14
Framework

//*將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類。


相關文章