如何创建无限的iscroll？

我在我的网页上创建了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 functoin：

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