ASP.NET仿新浪微網誌下拉加載更多資料瀑布流效果

　　閑來無事，琢磨着寫點東西。貌似頁面下拉加載資料，瀑布流的效果很火，各個網站都能見到各式各樣的展示效果，原理大同小異。于是乎，決定自己寫一寫這個效果，希望能給比我還菜的菜鳥們一點參考價值。

　　在開始之前，先把實作的基本原理說一下。當夜幕下拉到底部的時候，js可以判斷滾動條的位置，到達底部觸發js方法，執行jquery的ajax方法，向背景一般處理程式夜幕ashx檔案請求資料源，得到json格式的資料源。然後，周遊json資料源，拼接一個li标簽，再填充到頁面上去。

　　首先，我們來做個簡單的html頁面。頁面裡需要引入jquery庫，然後用jquery的ajax方法去請求背景程式，也就是一般處理程式頁面。待會，我會在一般處理程式頁面ashx檔案裡面寫方法，傳回前端頁面所需要的新聞清單資料源。資料源的格式，我用的json格式。

　　然後，來看一下代碼的頁面效果。

　　接下來，我們要建立資料庫，連接配接資料庫，讀取資料。這樣做太麻煩了，我直接用自定義的List資料來做示範了。我平時習慣為資料庫每張表都建立一個實體類，以此隐射資料庫的表，字段。這裡我們建立一個NewsInfo的實體類，也就是通常的三層架構程式裡面的Model裡面的類。同時，我們自定義一些資料給他，這個作為我們的資料源。真實開發環境下面，這個都是在DAL裡面去連接配接資料庫，讀取資料的。我這裡隻是用作示範，希望你們懂的。我在實體類中定義了一個帶參數的名為GetListByPn的方法。這個參數int類型的pn參數，你可以了解為你下拉頁面的次數。比如當你第一次拉到頁面底部的時候，這個參數為1，那我們就讀取前N條資料，當你第二次下拉到頁面底部的時候，這個參數為2，那我們就讀取第N到2N條之間的N條資料，這個就是存儲過程分頁的原理。這個方法，我傳回了一個類型是NewsInfo的List集合，這就是我們傳遞給前端頁面的資料源。

　　

　　現在，我們資料源已經有了，但是我們還沒有把資料源傳回給前端頁面。怎麼傳回呢？這裡用一般處理程式去做，就是字尾名為ashx的檔案。接着，我們建立一個一般處理程式頁面。在裡面接收前端頁面傳遞過來的參數pn，就是剛才說到的你下拉頁面的次數。然後把List資料源反序列化為Json字元串，傳回給前端頁面。這裡我們需要定義一個方法去将List結構的資料反序列化為Json格式的字元串。這個方法，我也是在百度上找的。而且，我在傳回資料源給前端頁面時，讓線程暫停了5秒。因為資料量比較少啊，一秒鐘都不需要就能加載出這10條資料來，但是你們做的時候可别寫這個暫停，這是說給某些“照抄黨”的，你懂了，就無視吧。　　

　　代碼就是這些了，現在運作看一下頁面的效果如何。

　　好了，這個簡單的下拉加載更多資料的效果就算是做出來了。雖然沒有新浪微網誌那種的高大上，但是基本可以應付日常需要的效果。最重要的是，通過這個，讓大家明白基本原理吧。最後，附上程式源碼。

本文來自部落格園，作者：搖曳de風筝，轉載請注明原文連結：https://www.cnblogs.com/pinzi/p/4224965.html