jquery를 사용하여 asp.net 웹 사이트 개발에서 스크롤 브라우저 스크롤 막대 로드 데이터 구현(Tencent Weibo와 유사)_jquery

저는 기본적으로 Tencent Weibo가 출시되었을 때부터 지금까지 개발자로서 Tencent Weibo가 끊임없이 변화하고 있다는 것을 보았습니다. Tencent Weibo가 두 가지 방법을 제공한다는 것을 눈치 채셨는지 모르겠습니다. 데이터 로드: 하나는 페이징이고 다른 하나는 데이터를 로드하기 위해 브라우저 스크롤 막대를 스크롤하는 것입니다. 모두가 페이징 기능을 너무 많이 수행한 것 같습니다. 오늘은 스크롤 막대를 사용하여 데이터를 로드하는 방법을 알려 드리겠습니다.
아래 강의 시작:
먼저 아이디어에 대해 이야기하겠습니다. Jquery를 사용한 다음 Jquery의 ajax() 메서드를 사용하여 HTTP 요청을 통해 원격 데이터를 로드합니다. Jquery를 사용할 때는 먼저 jquery.min.js를 적용해야 합니다. 클래스 라이브러리를 로컬에서 사용할 수 없는 경우 다음 주소.
자, 핵심 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

// - -!, 아시죠.
var count=;
var times=0
var added = true; Add_Data()
{
var top = $("#main_left_add").offset().top
if(loaded && ($(window).scrollTop() $(window).height( ) > 상단 ))
{
$("#main_left_add").html("데이터 로드 중...")
$.ajax(
{
type: "POST",
dataType: "text",
url: "weibo.ashx",
data: "userid=" "&count=" count "×=" times "&type=1",
success: function(data)
{
//alert("Append " 회 " times Data.");
if(data == "데이터 없음")
{
$("#main_left_add").css("display","none")
loaded =false ;
AddEffect();
}
else if(data == "")
{
$("#main_left_add").html("더 많은 내용을 로드하려면 클릭하세요.. ." );
$("#main_left_add").css("display","block");
loaded=false;
AddEffect();
}
else if( data ! = "")
{
$("#main_left_down").append(data)
AddEffect()
}
}
);
}
}
$(window).scroll(Add_Data);
//데이터를 추가하려면 클릭
$("#main_left_add").click(function(){
$.ajax ({
유형: "POST",
dataType: "text",
url: "weibo.ashx",
data:"userid=" "&touserid=" "&count=" count "×=" times "&type=2",
성공: 함수(데이터){
if(data= ="데이터 없음")
{
$("#main_left_add").css("display","none")
AddEffect()
}
else
{
$("#main_left_down").append(data);
$("#main_left_add").html("더 많은 것을 로드하려면 클릭하세요...")
AddEffect(); >}
}
});
//마우스 움직임 효과
$("#main_left_add").mouseover(function(){
$(this).css("배경- color", "#e4eef8");
});
$("#main_left_add").mouseout(function(){
$(this).css("Background-color","# f0f5f8") ;
});


프론트엔드 js 코드입니다. 코드를 조금 설명하자면 count는 정의된 데이터의 총 개수입니다. 두 개의 div가 정의됩니다. 하나의 div는 데이터를 추가하는 데 사용됩니다. div는 스크롤 막대의 위치를 ​​결정하는 데 사용되며, 프로그램을 처리하고 해당 데이터를 반환하기 위해 *.ashx 파일이 생성됩니다. 스크롤 추가가 완료된 후 추가 "더 로드하려면 클릭하세요" 기능도 추가했습니다. 이 기능의 구현은 위와 유사합니다. 코드는 모두 위에 나와 있습니다.
참고: 스크롤 이벤트가 항상 실행되는 것을 방지하기 위해 스크롤 이벤트의 실행을 제어하는 ​​로드를 정의합니다.