如何创建无限iscroll? [英] How to create infinite iscroll?

问题描述

我在网页上创建了iScroll，并且运行良好.但是现在我想让它像无限的iscroll一样工作，但是我不知道该怎么做.

I created iScroll on my webpage and it was working very well. But now i want to make it work as infinite iscroll, but i don't know how to do that.

我的iscroll代码是:

my iscroll code is:

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

            }
    });

有人可以帮助我吗?

推荐答案

首先，您需要添加 iscroll-infinite.js

然后，您需要编写ajax函数以无限循环加载或追加数据.

then you need to write ajax function to load or append data in infinite loop.

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加载的函数

Also call iScroll loaded function with ajax function

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/

这篇关于如何创建无限iscroll?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！