亚洲va国产va天堂va久久,国产一区国产精品,国产成人三级

主頁 > 知識庫 > ASP.NET仿新浪微博下拉加載更多數(shù)據(jù)瀑布流效果

ASP.NET仿新浪微博下拉加載更多數(shù)據(jù)瀑布流效果

閑來無事，琢磨著寫點(diǎn)東西。貌似頁面下拉加載數(shù)據(jù)，瀑布流的效果很火，各個(gè)網(wǎng)站都能見到各式各樣的展示效果，原理大同小異。于是乎，決定自己寫一寫這個(gè)效果，希望能給比我還菜的菜鳥們一點(diǎn)參考價(jià)值。

在開始之前，先把實(shí)現(xiàn)的基本原理說一下。當(dāng)夜幕下拉到底部的時(shí)候，js可以判斷滾動(dòng)條的位置，到達(dá)底部觸發(fā)js方法，執(zhí)行jquery的ajax方法，向后臺一般處理程序夜幕ashx文件請求數(shù)據(jù)源，得到j(luò)son格式的數(shù)據(jù)源。然后，遍歷json數(shù)據(jù)源，拼接一個(gè)li標(biāo)簽，再填充到頁面上去。

首先，我們來做個(gè)簡單的html頁面。頁面里需要引入jquery庫，然后用jquery的ajax方法去請求后臺程序，也就是一般處理程序頁面。待會，我會在一般處理程序頁面ashx文件里面寫方法，返回前端頁面所需要的新聞列表數(shù)據(jù)源。數(shù)據(jù)源的格式，我用的json格式。

!DOCTYPE html>
html xmlns="http://www.w3.org/1999/xhtml">
head>
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 title>仿新浪微博下拉頁面底部加載更多/title>
 style type="text/css">
  #main {
   margin: 10px auto;
   width: 990px;
  }
 
  #ListContent {
   color: white;
   position: relative;
  }
 
  #Listinfo {
   width: 850px;
   float: left;
   background-color: #071A37;
   position: relative;
   padding-bottom: 50px;
  }
 
   #Listinfo li {
    list-style: none;
    width: 800px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    float: left;
   }
 
  #LoadingMsg {
   display: none;
   margin: 0 0;
   padding: 0 0;
   height: 25px;
   line-height: 25px;
   width: 800px;
   position: absolute;
   left: 48px;
   text-align: center;
   vertical-align: middle;
   bottom: 20px;
  }
 
   #LoadingMsg span {
    margin: 0 0;
    padding: 0 0;
    background: url(loading.gif) left center no-repeat;
    padding-left: 30px;
    height: 25px;
    line-height: 25px;
   }
 /style>
 script type="text/javascript" src="jquery-1.8.2.js">/script>
 script type="text/javascript">
  $(function () {
   var PageNum = 0;
   $(window).scroll(function () {
    var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//瀏覽器的高度加上滾動(dòng)條的高度
    if ($(document).height() = totalheight)//當(dāng)文檔的高度小于或者等于總的高度的時(shí)候，開始動(dòng)態(tài)加載數(shù)據(jù)
    {
     $('#LoadingMsg').css('display', 'block');
     var randcode = 1 + Math.round(Math.random() * 9999);
     $.ajax({
      type: "Get",
      url: "Handler.ashx",
      dataType: "json",
      data: "PageNum=" + PageNum + "randcode" + randcode,
      success: function (data) {
       $.each(data, function (i, item) {
        if (item.Num == '-1') {
         $('#LoadingMsg').html('沒有更多數(shù)據(jù)了');
         $('#LoadingMsg').css('display', 'block');
        }
        else {
         $("#Listinfo").append("li>" + item.Num + ".font color='red'>" + item.Ntitle + "/font>/li>");//加載數(shù)據(jù)
        }
       })
       if (data.length > 0) {
        PageNum++;
       }
       //$('#LoadingMsg').css('display', 'none');
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
       alert("程序錯(cuò)誤，錯(cuò)誤信息：" + errorThrown);
      }
     });
    }
   });
  })
 /script>
/head>
body>
 div id="main">
  div id="ListContent">
   ul id="Listinfo">
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
    li>這里是很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很的新聞標(biāo)題/li>
   /ul>
   div style="clear: both">/div>
   div id="LoadingMsg">
    span>正在加載，請稍后.../span>
   /div>
  /div>
 /div>
/body>
/html>

接下來，我們要?jiǎng)?chuàng)建數(shù)據(jù)庫，連接數(shù)據(jù)庫，讀取數(shù)據(jù)。這樣做太麻煩了，我直接用自定義的List數(shù)據(jù)來做演示了。我平時(shí)習(xí)慣為數(shù)據(jù)庫每張表都創(chuàng)建一個(gè)實(shí)體類，以此隱射數(shù)據(jù)庫的表，字段。這里我們創(chuàng)建一個(gè)NewsInfo的實(shí)體類，也就是通常的三層架構(gòu)程序里面的Model里面的類。同時(shí)，我們自定義一些數(shù)據(jù)給他，這個(gè)作為我們的數(shù)據(jù)源。真實(shí)開發(fā)環(huán)境下面，這個(gè)都是在DAL里面去連接數(shù)據(jù)庫，讀取數(shù)據(jù)的。我這里只是用作演示，希望你們懂的。我在實(shí)體類中定義了一個(gè)帶參數(shù)的名為GetListByPn的方法。這個(gè)參數(shù)int類型的pn參數(shù)，你可以理解為你下拉頁面的次數(shù)。比如當(dāng)你第一次拉到頁面底部的時(shí)候，這個(gè)參數(shù)為1，那我們就讀取前N條數(shù)據(jù)，當(dāng)你第二次下拉到頁面底部的時(shí)候，這個(gè)參數(shù)為2，那我們就讀取第N到2N條之間的N條數(shù)據(jù)，這個(gè)就是存儲過程分頁的原理。這個(gè)方法，我返回了一個(gè)類型是NewsInfo的List集合，這就是我們傳遞給前端頁面的數(shù)據(jù)源。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
/// summary>
/// NewsInfo 的摘要說明
/// /summary>
public class NewsInfo
{
 public NewsInfo()
 {
  //
  // TODO: 在此處添加構(gòu)造函數(shù)邏輯
  //
 }
 public int Num { get; set; }
 public string Ntitle { get; set; }
 
 /// summary>
 /// 根據(jù)頁碼數(shù)獲取數(shù)據(jù)
 /// /summary>
 /// param name="pn">/param>
 /// returns>/returns>
 public static ListNewsInfo> GetListByPn(int pn)
 {
  ListNewsInfo> NewList = new ListNewsInfo>();
  NewList.Add(new NewsInfo { Num = 0, Ntitle = "華米科技宣布3500萬美元B輪融資 估值超3億美元" });
  NewList.Add(new NewsInfo { Num = 1, Ntitle = "淘汰CAPTCHA！谷歌推改良版CAPTCHA驗(yàn)證" });
  NewList.Add(new NewsInfo { Num = 2, Ntitle = "朋友圈做微商為何會如此遭人恨？買假貨 還刷屏" });
  NewList.Add(new NewsInfo { Num = 3, Ntitle = "社交化新聞聚合網(wǎng)站的未來發(fā)展趨勢" });
  NewList.Add(new NewsInfo { Num = 4, Ntitle = "雷軍未來3~5年間將砸10億美元投云計(jì)算" });
  NewList.Add(new NewsInfo { Num = 5, Ntitle = "Oculus CEO：我是如何邂逅扎克伯格的" });
  NewList.Add(new NewsInfo { Num = 6, Ntitle = "實(shí)戰(zhàn)：股權(quán)眾籌行業(yè)融資流程介紹" });
  NewList.Add(new NewsInfo { Num = 7, Ntitle = "理財(cái)范應(yīng)邀加入中關(guān)村互聯(lián)網(wǎng)金融行業(yè)協(xié)會" });
  NewList.Add(new NewsInfo { Num = 8, Ntitle = "P2P平臺的“羊毛”還能繼續(xù)擼嗎？沉迷易受傷" });
  NewList.Add(new NewsInfo { Num = 9, Ntitle = "美副國務(wù)卿：美中都是網(wǎng)絡(luò)攻擊的受害者" });
  NewList.Add(new NewsInfo { Num = 10, Ntitle = "谷歌將推兒童版YouTube和Chrome瀏覽器" });
  NewList.Add(new NewsInfo { Num = 11, Ntitle = "高盛“免費(fèi)”為Uber打車融資數(shù)億美元" });
  NewList.Add(new NewsInfo { Num = 12, Ntitle = "觀察:支付寶A股掛牌還需邁過幾道檻" });
  NewList.Add(new NewsInfo { Num = 13, Ntitle = "優(yōu)酷土豆劉德樂：多屏合一延伸視聽產(chǎn)業(yè)新邊界" });
  NewList.Add(new NewsInfo { Num = 14, Ntitle = "高盛“免費(fèi)”為Uber打車融資數(shù)億美元" });
  NewList.Add(new NewsInfo { Num = 15, Ntitle = "趣分期獲1億美金C輪融資 發(fā)力白領(lǐng)人群" });
  NewList.Add(new NewsInfo { Num = 16, Ntitle = "優(yōu)酷土豆劉德樂：多屏合一延伸視聽產(chǎn)業(yè)新邊界" });
  NewList.Add(new NewsInfo { Num = 17, Ntitle = "社交化新聞聚合網(wǎng)站的未來發(fā)展趨勢" });
  NewList.Add(new NewsInfo { Num = 18, Ntitle = "天天網(wǎng)董事長鞠傳國：美妝平臺還有上市空間" });
  NewList.Add(new NewsInfo { Num = 19, Ntitle = "百車寶 徐小平汽車領(lǐng)域投資第一單" });
  NewList.Add(new NewsInfo { Num = 20, Ntitle = "美副國務(wù)卿：美中都是網(wǎng)絡(luò)攻擊的受害者" });
  NewList.Add(new NewsInfo { Num = 21, Ntitle = "視頻網(wǎng)站繼續(xù)發(fā)力硬件 盒子依然是香餑餑" });
  NewList.Add(new NewsInfo { Num = 22, Ntitle = "谷歌推出網(wǎng)絡(luò)機(jī)器人識別工具reCaptchas" });
  NewList.Add(new NewsInfo { Num = 23, Ntitle = "理財(cái)范應(yīng)邀加入中關(guān)村互聯(lián)網(wǎng)金融行業(yè)協(xié)會" });
  NewList.Add(new NewsInfo { Num = 24, Ntitle = "《江南Style》視頻播放量爆表：谷歌被迫升級" });
  NewList.Add(new NewsInfo { Num = 25, Ntitle = "觀察:支付寶A股掛牌還需邁過幾道檻" });
  NewList.Add(new NewsInfo { Num = 26, Ntitle = "陌陌下周赴美上市 傍上阿里巴巴逆襲微信" });
  NewList.Add(new NewsInfo { Num = 27, Ntitle = "途牛同程封殺戰(zhàn)升級：驢媽媽半路聯(lián)手途牛" });
  NewList.Add(new NewsInfo { Num = 28, Ntitle = "互聯(lián)網(wǎng)時(shí)代更要尊重原創(chuàng)和夢想" });
  NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype前員工推出移動(dòng)即時(shí)通訊應(yīng)用Wire" });
  NewList.Add(new NewsInfo { Num = 30, Ntitle = "盤點(diǎn)：2014年Q3美國主要互聯(lián)網(wǎng)企業(yè)財(cái)報(bào)匯總" });
  NewList.Add(new NewsInfo { Num = 31, Ntitle = "盤點(diǎn)：西方社交媒體與社會資本研究綜述" });
  NewList.Add(new NewsInfo { Num = 32, Ntitle = "陌陌將在IPO同時(shí)向阿里巴巴與58同城增發(fā)新股" });
  NewList.Add(new NewsInfo { Num = 33, Ntitle = "從O2O閉環(huán)到推廣通 大眾點(diǎn)評移動(dòng)廣告創(chuàng)新不斷" });
  NewList.Add(new NewsInfo { Num = 34, Ntitle = "佛山豪車相撞 瑪莎拉蒂?zèng)_上花基保時(shí)捷" });
  NewList.Add(new NewsInfo { Num = 35, Ntitle = "一汽馬自達(dá)高效保養(yǎng)服務(wù)提升品牌價(jià)值" });
  NewList.Add(new NewsInfo { Num = 36, Ntitle = "一汽大眾速騰后懸架斷裂事件持續(xù) 案例信息采集中" });
  NewList.Add(new NewsInfo { Num = 37, Ntitle = "居民自發(fā)組織“車管會” 保障權(quán)益化解停車難" });
  NewList.Add(new NewsInfo { Num = 38, Ntitle = "新能源車：強(qiáng)化充電設(shè)施準(zhǔn)入門檻" });
  NewList.Add(new NewsInfo { Num = 39, Ntitle = "胡潤豪車報(bào)告引爭議 中國汽車文化尚未成熟" });
  NewList.Add(new NewsInfo { Num = 40, Ntitle = "725名速騰車主起訴一汽大眾 廠家舉行袖珍溝通會" });
  NewList.Add(new NewsInfo { Num = 41, Ntitle = "特斯拉PK比亞迪 誰是新能源車大贏家？" });
  NewList.Add(new NewsInfo { Num = 42, Ntitle = "深圳本田飛度享0.3萬優(yōu)惠送5000大禮包" });
  NewList.Add(new NewsInfo { Num = 43, Ntitle = "國家放開電動(dòng)車資質(zhì)：誰將站上“風(fēng)口”" });
  NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中國式電動(dòng)車發(fā)展困境？" });
  NewList.Add(new NewsInfo { Num = 45, Ntitle = "人民日報(bào)各抒己見：插電車為何不插電" });
  NewList.Add(new NewsInfo { Num = 46, Ntitle = "評論：“停車場亂象”再證多頭管理之弊" });
  NewList.Add(new NewsInfo { Num = 47, Ntitle = "時(shí)事圖說：停車費(fèi)給了誰" });
  NewList.Add(new NewsInfo { Num = 48, Ntitle = "評論：停車收費(fèi)之亂不僅在于去向成謎" });
  NewList.Add(new NewsInfo { Num = 49, Ntitle = "評論：“巨額停車費(fèi)”到底去哪兒了？" });
  NewList.Add(new NewsInfo { Num = 50, Ntitle = "一汽轎車召回部分奔騰B50轎車" });
  NewList.Add(new NewsInfo { Num = 51, Ntitle = "我國進(jìn)口車月均超11萬輛 SUV是絕對主力車型" });
  NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50%增速搶眼 家用化趨勢拉動(dòng)商用車企跨界" });
  NewList.Add(new NewsInfo { Num = 53, Ntitle = "別克將推全新敞篷車型 或命名\"Velite\"" });
  NewList.Add(new NewsInfo { Num = 54, Ntitle = "[深圳]本田鋒范綜合優(yōu)惠2.6萬元現(xiàn)車充足" });
  NewList.Add(new NewsInfo { Num = 55, Ntitle = "業(yè)內(nèi)人士：汽車電商不會犧牲經(jīng)銷商利益" });
  NewList.Add(new NewsInfo { Num = 56, Ntitle = "11月經(jīng)銷商庫存指數(shù)再高企" });
  NewList.Add(new NewsInfo { Num = 57, Ntitle = "整車企業(yè)牽手租車公司 全產(chǎn)業(yè)鏈合作挖掘消費(fèi)增長.." });
  NewList.Add(new NewsInfo { Num = 58, Ntitle = "用車小貼士：延長愛車壽命10妙招" });
  NewList.Add(new NewsInfo { Num = 59, Ntitle = "溫暖冬日 關(guān)懷延續(xù)昌河汽車?yán)m(xù)溫暖傳奇" });
  NewList.Add(new NewsInfo { Num = 60, Ntitle = "業(yè)主與業(yè)委會為何“有仇”？法規(guī)監(jiān)管存空白" });
  NewList.Add(new NewsInfo { Num = 61, Ntitle = "財(cái)苑訪談：降息利好房地產(chǎn) 一線城市房價(jià)仍然看漲" });
  NewList.Add(new NewsInfo { Num = 62, Ntitle = "王中丙在2014中國海洋經(jīng)濟(jì)博覽會論壇上發(fā)表主旨.." });
  NewList.Add(new NewsInfo { Num = 63, Ntitle = "地板同質(zhì)化需要業(yè)內(nèi)企業(yè)共同作用" });
  NewList.Add(new NewsInfo { Num = 64, Ntitle = "房地產(chǎn)永久產(chǎn)權(quán)成為現(xiàn)實(shí)后的9大猜想，你懂的" });
  NewList.Add(new NewsInfo { Num = 65, Ntitle = "世茂媒體行：世茂是如何將擅長的別墅做到了極致" });
  NewList.Add(new NewsInfo { Num = 66, Ntitle = "評論：小蠻腰巨虧 買單的是你我" });
  NewList.Add(new NewsInfo { Num = 67, Ntitle = "“房屋永久產(chǎn)權(quán)“引發(fā)熱議 “老房子“反而更賣座" });
  NewList.Add(new NewsInfo { Num = 68, Ntitle = "電器起火為何不能用水澆" });
  NewList.Add(new NewsInfo { Num = 69, Ntitle = "賈康：房地產(chǎn)稅立法將迎實(shí)質(zhì)性安排" });
  NewList.Add(new NewsInfo { Num = 70, Ntitle = "公交減車減趟 廓清謠言更要讀懂民心【長城時(shí)評】" });
  NewList.Add(new NewsInfo { Num = 71, Ntitle = "評論：誰解“亮化工程畫樓”的風(fēng)情？" });
 
  //IEnumerableNewsInfo> query = from n in NewList where (n.Num >= 10 * pn  n.Num  10 * (pn + 1)) select n;
  ListNewsInfo> ListQuery = (from n in NewList where (n.Num >= 10 * pn  n.Num  10 * (pn + 1)) select n).ToList();
  return ListQuery;
 }
}

現(xiàn)在，我們數(shù)據(jù)源已經(jīng)有了，但是我們還沒有把數(shù)據(jù)源返回給前端頁面。怎么返回呢？這里用一般處理程序去做，就是后綴名為ashx的文件。接著，我們新建一個(gè)一般處理程序頁面。在里面接收前端頁面?zhèn)鬟f過來的參數(shù)pn，就是剛才說到的你下拉頁面的次數(shù)。然后把List數(shù)據(jù)源反序列化為Json字符串，返回給前端頁面。這里我們需要定義一個(gè)方法去將List結(jié)構(gòu)的數(shù)據(jù)反序列化為Json格式的字符串。這個(gè)方法，我也是在百度上找的。而且，我在返回?cái)?shù)據(jù)源給前端頁面時(shí)，讓線程暫停了5秒。因?yàn)閿?shù)據(jù)量比較少啊，一秒鐘都不需要就能加載出這10條數(shù)據(jù)來，但是你們做的時(shí)候可別寫這個(gè)暫停，這是說給某些“照抄黨”的，你懂了，就無視吧。

%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Web;
using System.Collections.Generic;
using System.Threading;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;
 
public class Handler : IHttpHandler
{
 public void ProcessRequest(HttpContext context)
 {
  context.Response.ContentType = "text/plain";
  int pn = 0;
  if (context.Request.QueryString["PageNum"] != null)
  {
   if (context.Request.QueryString["PageNum"].ToString().Trim() != string.Empty)
   {
    if (int.TryParse(context.Request.QueryString["PageNum"].ToString().Trim(), out pn))
    {
     pn = int.Parse(context.Request.QueryString["PageNum"].ToString().Trim());
    }
   }
  }
  ListNewsInfo> ListQuery = NewsInfo.GetListByPn(pn);
  string ResultJson = "[{\"Num\":-1,\"Ntitle\":\"暫無數(shù)據(jù)\"}]";
  if (ListQuery.Count > 1)
  {
   ResultJson = Obj2JsonListNewsInfo>>(ListQuery);
  }
  Thread.Sleep(5000);//因?yàn)閿?shù)據(jù)量比較少，這里線程暫停5秒，讓頁面出現(xiàn)數(shù)據(jù)加載等待的效果
  context.Response.Write(ResultJson);
 }
 
 /// summary>
 /// List轉(zhuǎn)Json
 /// /summary>
 /// typeparam name="T">/typeparam>
 /// param name="t">/param>
 /// returns>/returns>
 public static string Obj2JsonT>(T t)
 {
  try
  {
   DataContractJsonSerializer serializer = new DataContractJsonSerializer(t.GetType());
   using (MemoryStream ms = new MemoryStream())
   {
    serializer.WriteObject(ms, t);
    return Encoding.UTF8.GetString(ms.ToArray());
   }
  }
  catch
  {
   return null;
  }
 }
 
 public bool IsReusable
 {
  get
  {
   return false;
  }
 }
}

代碼就是這些了，現(xiàn)在運(yùn)行看一下頁面的效果如何。

好了，這個(gè)簡單的下拉加載更多數(shù)據(jù)的效果就算是做出來了。雖然沒有新浪微博那種的高大上，但是基本可以應(yīng)付日常需要的效果。最重要的是，通過這個(gè)，讓大家明白基本原理吧。

以上就是本文的全部內(nèi)容，希望大家可以理解，對大家有所幫助。

您可能感興趣的文章:

適用與firefox ASP.NET無刷新二級聯(lián)動(dòng)下拉列表
ASP.NET 2.0寫無限級下拉菜單
google suggest 下拉菜單實(shí)現(xiàn)代碼(asp.net版本)
asp.net DropDownList 三級聯(lián)動(dòng)下拉菜單實(shí)現(xiàn)代碼
asp.net 實(shí)現(xiàn)下拉框只讀功能
ASP.NET C#生成下拉列表樹實(shí)現(xiàn)代碼
asp.net中js+jquery添加下拉框值和后臺獲取示例
asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
Asp.net下拉樹的實(shí)現(xiàn)過程
ASP.NET多彩下拉框開發(fā)實(shí)例

標(biāo)簽：洛陽衢州贛州青海崇左南寧汕尾

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《ASP.NET仿新浪微博下拉加載更多數(shù)據(jù)瀑布流效果》，本文關(guān)鍵詞 ASP.NET,仿,新浪,微博,下拉,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。