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)
    }
});

如何创建无限的iscroll？

2 个答案: