JavaScript 기반의 모바일 단말기에서 무제한 로딩 및 페이지 매김을 위한 샘플 코드 공유

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!