이 글에서는 주로 JavaScript를 기반으로 한 모바일 단말기의 무제한 로딩과 페이징 구현에 대해 자세히 소개하고 있으니 관심 있는 분들은
의 예시를 참고해 보세요. 이번 글에서는 참고하실 수 있도록 모바일 단말기에서 무한 로딩과 페이지 매김을 구현하기 위한 구체적인 코드를 js로 공유해 드렸습니다. 구체적인 내용은 다음과 같습니다.
원칙: 스크롤 바가 하단에 도달하면 다음 페이지의 내용이 실행됩니다.
판단 조건은 세 가지 개념을 이해해야 합니다.
1.scrollHeight 실제 콘텐츠의 높이
2.clientHeight 창의 높이, 즉 볼 수 있는 콘텐츠의 높이 브라우저에서
3.scrollTop 창의 숨겨진 부분, 즉 스크롤 막대의 스크롤 거리
아이디어:
1 . 고정 위치 로딩 상자 사용
2. $(window).scroll() 메서드를 사용하여 로드 여부를 트리거합니다.
3. 실제 콘텐츠 높이 - 창 높이 - 위의 숨겨진 부분
코드 샘플
var page=1; //当前页的页码 var flagNoData = false; //false var allpage; //总页码,会从后台获取 function showAjax(page){ $.ajax({ url:"", type:"", data:"", success:function(data){ //要执行的内容 showContent(); if(page>=data.allpage){ //当前页码大于等于总页码 flagNoData = true; }; page+=1; //页数加1 } }) } function scrollFn(){ //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); //视窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //隐藏的高度 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if(falgNoData){ //数据全部加载完了 return; }else if(pageHeight - viewportHeight - scrollHeight < 10){ //如果满足触发条件,执行 showAjax(page); } } $(window).bind("scroll",scrollFn); //绑定滚动事件
위 내용은 JavaScript 기반의 모바일 단말기에서 무제한 로딩 및 페이지 매김을 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!