jQuery 모바일 listviews 지연로드

Question

모바일 jquery lisview 위젯에서 지연로드를 구현하려면 어떻게해야합니까? 누구나 json 형식의 정적 목록 데이터를 사용하여 jquery 모바일 목록 뷰 위젯에 바인딩 할 수 있습니까? 감사합니다.

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 코드 (예 : trigger create)는 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의 스크롤에 기능을 사용하는 또 하나 개의 방법이 있습니다. 둘 다 일치하면 목록에 더 많은 항목을 추가하는 함수를 실행할 수 있습니다