모바일 웹 스크롤 페이징 MobileWeb 2011/11/24 12:18
모바일 웹 스크롤 페이징을 구현 하여 

간단한 방법이지만 추후 활용 성이 있을거 같아 포스팅을 합니당~

jquery 를 이용 하였습니다~

$(document).ready(function (){
$(window).scroll(function (){
if($(window).scrollTop() == $(document).height() - $(window).height()){ //최하단의 위치값과 동일여부
lastPosted(); //스크롤페이징 ajax 호출 스크립트
} 
});

lastPosted(); //스크롤페이징 ajax 호출 스크립트
}); 

위의 것은 안드로이드 에서 test해본 결과 이다. 잘된다~ 아이폰은 높이 갚이 좀 틀리더라구요. 맨하단의 툴바인지 주소창 문제 인지는 모르지만 alert 로 체크하여 높이값을 제설정 해주었습니다.

if($(window).scrollTop() == $(document).height() - $(window).height() - 60 ){ //최하단의 위치값과 동일여부
       lastPosted(); //스크롤페이징 ajax 호출 스크립트
} 

소스를 보시면 지금 현재 높이 값과 스크롤이 최상단의 값을 비교 하여 최하단의 위치 라면. scroll paging ajax 함수 스크립트를 호출 합니다~

저 같은 경우는 게시물의 마지막 인덱스 값을 가지고 판가름 합니다. 물론 없을 경우 DB SP 에서 해당 게시물의 MAX 값을 뽑아서 인덱스를 설정해주는 방식으로 합니다.


예제 소스를 올리겠습니다.

<!--페이징 호출 script-->

 <script type="text/javascript">
  var pstate = 0; //ajax 진행중값

  function lastPostLoad(){   

   if(pstate == 0){ /*진행중이 아닐경우*/
    $("#LodingImage").html('<img src="/images/loading.gif" style="margin:10px 0;"  />');
    pstate == 1; //진행중값으로 변경
    var lastId = 0;
    if($(".list li:last").attr("id")){ //id 값이 있을 
      // window.scrollTo(0, $(window).scrollTop() + 30);
       if (navigator.userAgent.indexOf('iPhone') != -1) 
        {
       setTimeout(scrollTo, 0, 0, $(window).scrollTop() + 30);         //안드로이드 스크롤 아래이동
        }else{
       window.scrollTo(0, $(window).scrollTop() + 30); //아이폰 스크롤 아래이동.
        }     
     lastId = $(".list li:last").attr("id");
    }
    /*ajax 호출*/
    $.ajax({
     type :"POST",
     data : "lastIdx="+lastId+"&count=6+ "파리미터",
     url  : "페이지호출 url",
     success: function (data){
      
      if(data=="false"){
       alert("데이터를 로드 하지 못하였습니다.");
       $("#LodingImage").empty();
       pstate = 0;
      }else if(data == ""){
       alert("더이상 목록이 존재 하지 않습니다.");
       $("#LodingImage").empty();
       pstate = 1;

      }else{

       if($(".list li:last").attr("id")){ //첫실행이 아닐경우 li존재

        $(".list li:last").after(data);

       }else{ //첫실행일 경우li 없음

        $(".list").html(data); 
       }

       $("#LodingImage").empty();
       pstate = 0;
      }
     },
     error: function (){
      alert("파일 접속 오류 잠시후 이용해 주세요.");
      $("#LodingImage").empty();      
      pstate = 0;
     }
    });
   }
  }
  //window.onLoad = lastPostLoad;
 </script>

 <!--end-->

 <ul class="list">
         
    </ul>
  </div>
  <div id="LodingImage"></div>  


제가 사용한 소스 입니다. 간단합니다 ul list 에서 li 를 넣어 줍니다. 위에서 설명한 것과 같이 최상단 index 값의 하위 데이터를 가져와서 넣어주는 방식입니다. 여기서 주의 하셔야 할것이..



  if (navigator.userAgent.indexOf('iPhone') != -1) 
        {
       setTimeout(scrollTo, 0, 0, $(window).scrollTop() + 30);         
        }else{
       window.scrollTo(0, $(window).scrollTop() + 30);
        }     

이부분인데요 이부분은 스크롤을 움직이는 부분입니다. 보시다시피 안드로이드와 아이폰 스크롤 이동 이벤트를 분기 하였구요. 스크롤을 더 아래로 이동시켜 로딩 이미지 라든지 아래 리스팅이 된것을 확인 시켜 주기 위해 스크롤을 좀더 아래로 이동 시켜 주었습니다. 


이상 허접한 스크롤 페이징에 관련된 포스팅 입니다,^^;

 
 

'MobileWeb' 카테고리의 다른 글

모바일 웹 스크롤 페이징  (0) 2011/11/24
모바일 웹 이미지 복사 막기  (0) 2011/02/21
트랙백0개 , 댓글0개
1 ... 5 6 7 8 9 10 11 12 13 ... 48