jQuery mobile listviews懒惰加载

Question

我如何在移动jquery lisview小部件中实现延迟加载？ 任何人都可以给出一个例子使用json格式的静态数据绑定到jQuery的移动listview小部件？ 谢谢。

Answer 1

有几种方法，以下两种方法很好用

JQM的方式，一个很好的教程。它可以检测，当你滚动到列表视图和负载更多项目的底部列出

http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/

演示

http://jsfiddle.net/Palestinian/pAgbT/light/

另一种方法是使用Iscroll 5堵塞。同样，你可以设置一个函数来检测，当您滚动到列表的底部，并加载新的项目

http://iscrolljs.com/

演示我把整个Iscroll 5堵漏演示所以向下滚动////JQM STUFF查看实际代码

某些JQM代码（例如，触发器创建）在JQM 1.4中折旧，因此需要对其进行一些修改，使其大于1.4才能工作。

http://jsfiddle.net/t0t3Lz5x/

var myScroll; 

$(document).ready(function(){ 

     myScroll = new IScroll('#wrapper', 
         { 
          scrollX: false, 
          scrollY: true 
          ,click:true // open click event 
          ,scrollbars: false 
          ,useTransform: true 
          ,useTransition: false 
          ,probeType:3, 
          mouseWheel:true, 
          bindToWrapper: true 
     }); 

}); 


function initscroll() { 

    setTimeout(function() { 
      myScroll.refresh(); 
     }, 1000); 
    } 




     output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>'; 
$('#listview').html(output).listview().listview('refresh'); 
initscroll() 

myScroll.on('scrollEnd', function() { 
if (this.y == this.maxScrollY) 

load_new_items(); 

}); 

function load_new_items() { 

mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>'); 
mysearchlist.appendTo("#listview").trigger('create'); 
$('#listview').listview().listview('refresh'); 
initscroll()  

} 

有使用jQuery上滚动的功能监视列表的高度，然后为你滚动衡量你从列表的顶部滚动的像素多了一个途径。当两个匹配时，你可以运行一个函数来追加列表中的更多项目