jquery を使用して、asp.net Web サイト開発でデータを読み込むスクロール ブラウザー スクロール バーを実装します (Tencent Weibo と同様)_jquery

私は開発者として Tencent Weibo が常に変化していることを今まで見てきましたが、Tencent Weibo には 2 つの方法があります。データのロード: 1 つはページング、もう 1 つはブラウザーのスクロール バーをスクロールしてデータをロードすることです。今日は、スクロール バーを使用してデータをロードする方法を共有します。以下で講義を開始します:
最初に Jquery を使用し、次に Jquery の ajax() メソッドを使用して HTTP リクエストを通じてリモート データをロードします。クラス ライブラリがローカルで利用できない場合は、次のアドレスを直接引用することもできます。
それでは、コア コードを見てみましょう:

コードをコピーします コードは次のとおりです:

// - -!
var count=;
var ロード = true; Add_Data()
{
var top = $("#main_left_add").offset().top;
if(loaded && ($(window).scrollTop() $(window).height( ) > トップ ))
{
$("#main_left_add").html("データの読み込み中...");
$.ajax(
{ タイプ: "POST"、
データタイプ: "テキスト"、
URL: "weibo.ashx"、
データ: "userid=" "&count= count "×=" 回 "&type=1",
成功: function(data)
{
//alert("Append " 回) " 回データ。");
if(data == "データなし")
$("#main_left_add").css("display","none"); =false ;
AddEffect();
}
else if(data == "")
{
$("#main_left_add").html("クリックして詳細をロードします。 ." );
$("#main_left_add").css("display","block");
loaded=false;
AddEffect();
}
else if(データ ! = "")
{
$("#main_left_down").append(data);
}
}
);
}
}
$(window).scroll(Add_Data);
//クリックしてデータを追加します
$("#main_left_add").click(function(){
$.ajax ({
type: "POST",
dataType: "text",
url: "weibo.ashx",
data:"userid=" "&touserid=" "&count=" count "×=" 回 "&type=2",
成功: function(data){
if(data= ="データなし")
{
$("#main_left_add").css("display","none");
AddEffect()
}
else
; {
$("#main_left_down").append(data);
$("#main_left_add").html("クリックしてさらに読み込む..."); >}
}
});
//マウス移動効果
$("#main_left_add").mouseover(function(){
$(this).css("background- color", "#e4eef8");
});
$("#main_left_add").mouseout(function(){
$(this).css("背景色","# f0f5f8") ;
});


これはフロントエンド JS コードです。コードを少し説明しましょう: count は定義されたデータの総数です。2 つの div が定義されています1 つの div はスクロール バーの位置を決定するために使用され、*.ashx ファイルはプログラムを処理して対応するデータを返すために作成されます。このデータに基づいて読み込みを決定する必要があります。スクロールの追加が完了した後、「クリックして詳細をロードする」関数も追加しました。この関数の実装は上記と同様です。参考までに、コードはすべて上記にあります。
注: スクロール イベントが常に実行されるのを防ぐために、スクロール イベントの実行を制御するロードが定義されています。