jquery - 如何创建无限iscroll？

Question

我在我的网页上创建了 iScroll，它运行良好。但现在我想让它作为无限 iscroll 工作，但我不知道该怎么做。

我的 iscroll 代码是：

myCarousel_up = new iScroll('scroller_upCarousel', {
        snap: true,
        momentum: false,
        hScrollbar: false,
                vScrollbar: false,
        desktopCompatibility:true,
        onScrollEnd: function () {

            }
    });

谁能帮我？

Answer 1

首先你需要添加iscroll-infinite.js

那么你需要编写ajax函数来无限循环加载或追加数据。

function ajax (url, parms) {
parms = parms || {};
var req = new XMLHttpRequest(),
    post = parms.post || null,
    callback = parms.callback || null,
    timeout = parms.timeout || null;

req.onreadystatechange = function () {
    if ( req.readyState != 4 ) return;

    // Error
    if ( req.status != 200 && req.status != 304 ) {
        if ( callback ) callback(false);
        return;
    }

    if ( callback ) callback(req.responseText);
};

if ( post ) {
    req.open('POST', url, true);
    req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
} else {
    req.open('GET', url, true);
}

req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

req.send(post);

if ( timeout ) {
    setTimeout(function () {
        req.onreadystatechange = function () {};
        req.abort();
        if ( callback ) callback(false);
    }, timeout);
}
}

还使用 ajax 函数调用 iScroll 加载函数

var myScroll;

function loaded () {
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    infiniteElements: '#scroller .row',
    //infiniteLimit: 2000,
    dataset: requestData,
    dataFiller: updateContent,
    cacheSize: 1000
});
}

function requestData (start, count) {
ajax('dataset.php?start=' + +start + '&count=' + +count, {
    callback: function (data) {
        data = JSON.parse(data);
        myScroll.updateCache(start, data);
    }
});
}

function updateContent (el, data) {
el.innerHTML = data;
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

请参考以下链接进行演示。

http://lab.cubiq.org/iscroll5/demos/infinite/

Answer 2

您可以使用 ajax 函数，例如：

myCarousel_up = new iScroll('scroller_upCarousel', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        desktopCompatibility:true,
        onScrollEnd: function () {
        if($('#scroller_upCarousel').hasClass('scrolling')) {
            $('#scroller_upCarousel').removeClass('scrolling');
        } 
        ajaxActionToGetMoreList(); //Execute custom function(ajax call)
    }
});