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上滾動的功能監視列表的高度，然後爲你滾動衡量你從列表的頂部滾動的像素多了一個途徑。當兩個匹配時，你可以運行一個函數來追加列表中的更多項目