ASP.NET仿新浪微博下拉加載更多數(shù)據(jù)瀑布流效果
更新時(shí)間：2022年04月26日 09:20:00 作者：xiaopinzi
本篇文章介紹了如何實(shí)現(xiàn)下拉加載更多數(shù)據(jù)瀑布流的效果，這種效果最近很流行，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
閑來(lái)無(wú)事，琢磨著寫(xiě)點(diǎn)東西。貌似頁(yè)面下拉加載數(shù)據(jù)，瀑布流的效果很火，各個(gè)網(wǎng)站都能見(jiàn)到各式各樣的展示效果，原理大同小異。于是乎，決定自己寫(xiě)一寫(xiě)這個(gè)效果，希望能給比我還菜的菜鳥(niǎo)們一點(diǎn)參考價(jià)值。
在開(kāi)始之前，先把實(shí)現(xiàn)的基本原理說(shuō)一下。當(dāng)夜幕下拉到底部的時(shí)候，js可以判斷滾動(dòng)條的位置，到達(dá)底部觸發(fā)js方法，執(zhí)行jquery的ajax方法，向后臺(tái)一般處理程序夜幕ashx文件請(qǐng)求數(shù)據(jù)源，得到j(luò)son格式的數(shù)據(jù)源。然后，遍歷json數(shù)據(jù)源，拼接一個(gè)li標(biāo)簽，再填充到頁(yè)面上去。
首先，我們來(lái)做個(gè)簡(jiǎn)單的html頁(yè)面。頁(yè)面里需要引入jquery庫(kù)，然后用jquery的ajax方法去請(qǐng)求后臺(tái)程序，也就是一般處理程序頁(yè)面。待會(huì)，我會(huì)在一般處理程序頁(yè)面ashx文件里面寫(xiě)方法，返回前端頁(yè)面所需要的新聞列表數(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>仿新浪微博下拉頁(yè)面底部加載更多</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í)候，開(kāi)始動(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('沒(méi)有更多數(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>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
<li>這里是很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很的新聞標(biāo)題</li>
</ul>
<div style="clear: both"></div>
<div id="LoadingMsg">
<span>正在加載，請(qǐng)稍后...</span>
</div>
</div>
</div>
</body>
</html>
接下來(lái)，我們要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)，連接數(shù)據(jù)庫(kù)，讀取數(shù)據(jù)。這樣做太麻煩了，我直接用自定義的List數(shù)據(jù)來(lái)做演示了。我平時(shí)習(xí)慣為數(shù)據(jù)庫(kù)每張表都創(chuàng)建一個(gè)實(shí)體類(lèi)，以此隱射數(shù)據(jù)庫(kù)的表，字段。這里我們創(chuàng)建一個(gè)NewsInfo的實(shí)體類(lèi)，也就是通常的三層架構(gòu)程序里面的Model里面的類(lèi)。同時(shí)，我們自定義一些數(shù)據(jù)給他，這個(gè)作為我們的數(shù)據(jù)源。真實(shí)開(kāi)發(fā)環(huán)境下面，這個(gè)都是在DAL里面去連接數(shù)據(jù)庫(kù)，讀取數(shù)據(jù)的。我這里只是用作演示，希望你們懂的。我在實(shí)體類(lèi)中定義了一個(gè)帶參數(shù)的名為GetListByPn的方法。這個(gè)參數(shù)int類(lèi)型的pn參數(shù)，你可以理解為你下拉頁(yè)面的次數(shù)。比如當(dāng)你第一次拉到頁(yè)面底部的時(shí)候，這個(gè)參數(shù)為1，那我們就讀取前N條數(shù)據(jù)，當(dāng)你第二次下拉到頁(yè)面底部的時(shí)候，這個(gè)參數(shù)為2，那我們就讀取第N到2N條之間的N條數(shù)據(jù)，這個(gè)就是存儲(chǔ)過(guò)程分頁(yè)的原理。這個(gè)方法，我返回了一個(gè)類(lèi)型是NewsInfo的List集合，這就是我們傳遞給前端頁(yè)面的數(shù)據(jù)源。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// NewsInfo 的摘要說(shuō)明
/// </summary>
public class NewsInfo
{
public NewsInfo()
{
//
// TODO: 在此處添加構(gòu)造函數(shù)邏輯
//
}
public int Num { get; set; }
public string Ntitle { get; set; }
/// <summary>
/// 根據(jù)頁(yè)碼數(shù)獲取數(shù)據(jù)
/// </summary>
/// <param name="pn"></param>
/// <returns></returns>
public static List<NewsInfo> GetListByPn(int pn)
{
List<NewsInfo> NewList = new List<NewsInfo>();
NewList.Add(new NewsInfo { Num = 0, Ntitle = "華米科技宣布3500萬(wàn)美元B輪融資 估值超3億美元" });
NewList.Add(new NewsInfo { Num = 1, Ntitle = "淘汰CAPTCHA！谷歌推改良版CAPTCHA驗(yàn)證" });
NewList.Add(new NewsInfo { Num = 2, Ntitle = "朋友圈做微商為何會(huì)如此遭人恨？買(mǎi)假貨 還刷屏" });
NewList.Add(new NewsInfo { Num = 3, Ntitle = "社交化新聞聚合網(wǎng)站的未來(lái)發(fā)展趨勢(shì)" });
NewList.Add(new NewsInfo { Num = 4, Ntitle = "雷軍未來(lái)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é)會(huì)" });
NewList.Add(new NewsInfo { Num = 8, Ntitle = "P2P平臺(tái)的“羊毛”還能繼續(xù)擼嗎？沉迷易受傷" });
NewList.Add(new NewsInfo { Num = 9, Ntitle = "美副國(guó)務(wù)卿：美中都是網(wǎng)絡(luò)攻擊的受害者" });
NewList.Add(new NewsInfo { Num = 10, Ntitle = "谷歌將推兒童版YouTube和Chrome瀏覽器" });
NewList.Add(new NewsInfo { Num = 11, Ntitle = "高盛“免費(fèi)”為Uber打車(chē)融資數(shù)億美元" });
NewList.Add(new NewsInfo { Num = 12, Ntitle = "觀察:支付寶A股掛牌還需邁過(guò)幾道檻" });
NewList.Add(new NewsInfo { Num = 13, Ntitle = "優(yōu)酷土豆劉德樂(lè)：多屏合一延伸視聽(tīng)產(chǎn)業(yè)新邊界" });
NewList.Add(new NewsInfo { Num = 14, Ntitle = "高盛“免費(fèi)”為Uber打車(chē)融資數(shù)億美元" });
NewList.Add(new NewsInfo { Num = 15, Ntitle = "趣分期獲1億美金C輪融資 發(fā)力白領(lǐng)人群" });
NewList.Add(new NewsInfo { Num = 16, Ntitle = "優(yōu)酷土豆劉德樂(lè)：多屏合一延伸視聽(tīng)產(chǎn)業(yè)新邊界" });
NewList.Add(new NewsInfo { Num = 17, Ntitle = "社交化新聞聚合網(wǎng)站的未來(lái)發(fā)展趨勢(shì)" });
NewList.Add(new NewsInfo { Num = 18, Ntitle = "天天網(wǎng)董事長(zhǎng)鞠傳國(guó)：美妝平臺(tái)還有上市空間" });
NewList.Add(new NewsInfo { Num = 19, Ntitle = "百車(chē)寶 徐小平汽車(chē)領(lǐng)域投資第一單" });
NewList.Add(new NewsInfo { Num = 20, Ntitle = "美副國(guó)務(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ī)器人識(shí)別工具reCaptchas" });
NewList.Add(new NewsInfo { Num = 23, Ntitle = "理財(cái)范應(yīng)邀加入中關(guān)村互聯(lián)網(wǎng)金融行業(yè)協(xié)會(huì)" });
NewList.Add(new NewsInfo { Num = 24, Ntitle = "《江南Style》視頻播放量爆表：谷歌被迫升級(jí)" });
NewList.Add(new NewsInfo { Num = 25, Ntitle = "觀察:支付寶A股掛牌還需邁過(guò)幾道檻" });
NewList.Add(new NewsInfo { Num = 26, Ntitle = "陌陌下周赴美上市 傍上阿里巴巴逆襲微信" });
NewList.Add(new NewsInfo { Num = 27, Ntitle = "途牛同程封殺戰(zhàn)升級(jí)：驢媽媽半路聯(lián)手途牛" });
NewList.Add(new NewsInfo { Num = 28, Ntitle = "互聯(lián)網(wǎng)時(shí)代更要尊重原創(chuàng)和夢(mèng)想" });
NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype前員工推出移動(dòng)即時(shí)通訊應(yīng)用Wire" });
NewList.Add(new NewsInfo { Num = 30, Ntitle = "盤(pán)點(diǎn)：2014年Q3美國(guó)主要互聯(lián)網(wǎng)企業(yè)財(cái)報(bào)匯總" });
NewList.Add(new NewsInfo { Num = 31, Ntitle = "盤(pán)點(diǎn)：西方社交媒體與社會(huì)資本研究綜述" });
NewList.Add(new NewsInfo { Num = 32, Ntitle = "陌陌將在IPO同時(shí)向阿里巴巴與58同城增發(fā)新股" });
NewList.Add(new NewsInfo { Num = 33, Ntitle = "從O2O閉環(huán)到推廣通 大眾點(diǎn)評(píng)移動(dòng)廣告創(chuàng)新不斷" });
NewList.Add(new NewsInfo { Num = 34, Ntitle = "佛山豪車(chē)相撞 瑪莎拉蒂?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ā)組織“車(chē)管會(huì)” 保障權(quán)益化解停車(chē)難" });
NewList.Add(new NewsInfo { Num = 38, Ntitle = "新能源車(chē)：強(qiáng)化充電設(shè)施準(zhǔn)入門(mén)檻" });
NewList.Add(new NewsInfo { Num = 39, Ntitle = "胡潤(rùn)豪車(chē)報(bào)告引爭(zhēng)議 中國(guó)汽車(chē)文化尚未成熟" });
NewList.Add(new NewsInfo { Num = 40, Ntitle = "725名速騰車(chē)主起訴一汽大眾 廠家舉行袖珍溝通會(huì)" });
NewList.Add(new NewsInfo { Num = 41, Ntitle = "特斯拉PK比亞迪 誰(shuí)是新能源車(chē)大贏家？" });
NewList.Add(new NewsInfo { Num = 42, Ntitle = "深圳本田飛度享0.3萬(wàn)優(yōu)惠送5000大禮包" });
NewList.Add(new NewsInfo { Num = 43, Ntitle = "國(guó)家放開(kāi)電動(dòng)車(chē)資質(zhì)：誰(shuí)將站上“風(fēng)口”" });
NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中國(guó)式電動(dòng)車(chē)發(fā)展困境？" });
NewList.Add(new NewsInfo { Num = 45, Ntitle = "人民日?qǐng)?bào)各抒己見(jiàn)：插電車(chē)為何不插電" });
NewList.Add(new NewsInfo { Num = 46, Ntitle = "評(píng)論：“停車(chē)場(chǎng)亂象”再證多頭管理之弊" });
NewList.Add(new NewsInfo { Num = 47, Ntitle = "時(shí)事圖說(shuō)：停車(chē)費(fèi)給了誰(shuí)" });
NewList.Add(new NewsInfo { Num = 48, Ntitle = "評(píng)論：停車(chē)收費(fèi)之亂不僅在于去向成謎" });
NewList.Add(new NewsInfo { Num = 49, Ntitle = "評(píng)論：“巨額停車(chē)費(fèi)”到底去哪兒了？" });
NewList.Add(new NewsInfo { Num = 50, Ntitle = "一汽轎車(chē)召回部分奔騰B50轎車(chē)" });
NewList.Add(new NewsInfo { Num = 51, Ntitle = "我國(guó)進(jìn)口車(chē)月均超11萬(wàn)輛 SUV是絕對(duì)主力車(chē)型" });
NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50%增速搶眼 家用化趨勢(shì)拉動(dòng)商用車(chē)企跨界" });
NewList.Add(new NewsInfo { Num = 53, Ntitle = "別克將推全新敞篷車(chē)型 或命名\"Velite\"" });
NewList.Add(new NewsInfo { Num = 54, Ntitle = "[深圳]本田鋒范綜合優(yōu)惠2.6萬(wàn)元現(xiàn)車(chē)充足" });
NewList.Add(new NewsInfo { Num = 55, Ntitle = "業(yè)內(nèi)人士：汽車(chē)電商不會(huì)犧牲經(jīng)銷(xiāo)商利益" });
NewList.Add(new NewsInfo { Num = 56, Ntitle = "11月經(jīng)銷(xiāo)商庫(kù)存指數(shù)再高企" });
NewList.Add(new NewsInfo { Num = 57, Ntitle = "整車(chē)企業(yè)牽手租車(chē)公司 全產(chǎn)業(yè)鏈合作挖掘消費(fèi)增長(zhǎng).." });
NewList.Add(new NewsInfo { Num = 58, Ntitle = "用車(chē)小貼士：延長(zhǎng)愛(ài)車(chē)壽命10妙招" });
NewList.Add(new NewsInfo { Num = 59, Ntitle = "溫暖冬日 關(guān)懷延續(xù)昌河汽車(chē)?yán)m(xù)溫暖傳奇" });
NewList.Add(new NewsInfo { Num = 60, Ntitle = "業(yè)主與業(yè)委會(huì)為何“有仇”？法規(guī)監(jiān)管存空白" });
NewList.Add(new NewsInfo { Num = 61, Ntitle = "財(cái)苑訪談：降息利好房地產(chǎn) 一線城市房?jī)r(jià)仍然看漲" });
NewList.Add(new NewsInfo { Num = 62, Ntitle = "王中丙在2014中國(guó)海洋經(jīng)濟(jì)博覽會(huì)論壇上發(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 = "世茂媒體行：世茂是如何將擅長(zhǎng)的別墅做到了極致" });
NewList.Add(new NewsInfo { Num = 66, Ntitle = "評(píng)論：小蠻腰巨虧 買(mǎi)單的是你我" });
NewList.Add(new NewsInfo { Num = 67, Ntitle = "“房屋永久產(chǎn)權(quán)“引發(fā)熱議 “老房子“反而更賣(mài)座" });
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 = "公交減車(chē)減趟 廓清謠言更要讀懂民心【長(zhǎng)城時(shí)評(píng)】" });
NewList.Add(new NewsInfo { Num = 71, Ntitle = "評(píng)論：誰(shuí)解“亮化工程畫(huà)樓”的風(fēng)情？" });
//IEnumerable<NewsInfo> query = from n in NewList where (n.Num >= 10 * pn && n.Num < 10 * (pn + 1)) select n;
List<NewsInfo> 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)有了，但是我們還沒(méi)有把數(shù)據(jù)源返回給前端頁(yè)面。怎么返回呢？這里用一般處理程序去做，就是后綴名為ashx的文件。接著，我們新建一個(gè)一般處理程序頁(yè)面。在里面接收前端頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)pn，就是剛才說(shuō)到的你下拉頁(yè)面的次數(shù)。然后把List數(shù)據(jù)源反序列化為Json字符串，返回給前端頁(yè)面。這里我們需要定義一個(gè)方法去將List結(jié)構(gòu)的數(shù)據(jù)反序列化為Json格式的字符串。這個(gè)方法，我也是在百度上找的。而且，我在返回?cái)?shù)據(jù)源給前端頁(yè)面時(shí)，讓線程暫停了5秒。因?yàn)閿?shù)據(jù)量比較少啊，一秒鐘都不需要就能加載出這10條數(shù)據(jù)來(lái)，但是你們做的時(shí)候可別寫(xiě)這個(gè)暫停，這是說(shuō)給某些“照抄黨”的，你懂了，就無(wú)視吧。
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());
}
}
}
List<NewsInfo> ListQuery = NewsInfo.GetListByPn(pn);
string ResultJson = "[{\"Num\":-1,\"Ntitle\":\"暫無(wú)數(shù)據(jù)\"}]";
if (ListQuery.Count > 1)
{
ResultJson = Obj2Json<List<NewsInfo>>(ListQuery);
}
Thread.Sleep(5000);//因?yàn)閿?shù)據(jù)量比較少，這里線程暫停5秒，讓頁(yè)面出現(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 Obj2Json<T>(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)行看一下頁(yè)面的效果如何。
好了，這個(gè)簡(jiǎn)單的下拉加載更多數(shù)據(jù)的效果就算是做出來(lái)了。雖然沒(méi)有新浪微博那種的高大上，但是基本可以應(yīng)付日常需要的效果。最重要的是，通過(guò)這個(gè)，讓大家明白基本原理吧。
以上就是本文的全部?jī)?nèi)容，希望大家可以理解，對(duì)大家有所幫助。
您可能感興趣的文章:
- 適用與firefox ASP.NET無(wú)刷新二級(jí)聯(lián)動(dòng)下拉列表
- ASP.NET 2.0寫(xiě)無(wú)限級(jí)下拉菜單
- google suggest 下拉菜單實(shí)現(xiàn)代碼(asp.net版本)
- asp.net DropDownList 三級(jí)聯(lián)動(dòng)下拉菜單實(shí)現(xiàn)代碼
- asp.net 實(shí)現(xiàn)下拉框只讀功能
- ASP.NET C#生成下拉列表樹(shù)實(shí)現(xiàn)代碼
- asp.net中js+jquery添加下拉框值和后臺(tái)獲取示例
- asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法
- Asp.net下拉樹(shù)的實(shí)現(xiàn)過(guò)程
- ASP.NET多彩下拉框開(kāi)發(fā)實(shí)例
相關(guān)文章
使用.net?core?自帶DI框架實(shí)現(xiàn)延遲加載功能
在某些情況，我們希望能延遲一個(gè)依賴(lài)的初始化。如果使用的是autofac，我們可以通過(guò)注入Lazy來(lái)實(shí)現(xiàn)，這篇文章主要介紹了使用.net?core?自帶DI框架實(shí)現(xiàn)延遲加載,需要的朋友可以參考下2023-02-02
本文給大家分享一段smtp發(fā)送帶附件郵件的代碼，代碼非常簡(jiǎn)潔易懂，有需要的小伙伴可以參考下。2014-11-11
詳解免費(fèi)開(kāi)源的DotNet任務(wù)調(diào)度組件Quartz.NET（.NET組件介紹之五）
本篇文章主要介紹免費(fèi)開(kāi)源的DotNet任務(wù)調(diào)度組件Quartz.NET（.NET組件介紹之五），具有一定參考價(jià)值，有興趣的可以了解一下。2016-12-12
asp.net SqlDataAdapter對(duì)象使用札記
如果 DataAdapter 遇到多個(gè)結(jié)果集，它將在 DataSet 中創(chuàng)建多個(gè)表。將向這些表提供遞增的默認(rèn)名稱(chēng) TableN，以表示 Table0 的“Table”為第一個(gè)表名。2009-04-04
引用cs中變量的實(shí)現(xiàn)方法2008-07-07
這篇文章介紹了asp.net C#生成和解析二維碼的實(shí)例代碼，有需要的朋友可以參考一下2013-10-10
.Net?Core讀取文件時(shí)中文亂碼問(wèn)題的解決方法分享
所以關(guān)于讀取文件亂碼的問(wèn)題,百度上有很多方案,這里再給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于.Net?Core讀取文件時(shí)中文亂碼問(wèn)題的解決方法,需要的朋友可以參考下2022-02-02
.net后臺(tái)頁(yè)面統(tǒng)一驗(yàn)證是否登錄
這篇文章主要為大家詳細(xì)介紹了.net后臺(tái)頁(yè)面統(tǒng)一驗(yàn)證是否登錄的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
ASP.NET對(duì)HTML頁(yè)面元素進(jìn)行權(quán)限控制(三)
界面每個(gè)元素的權(quán)限也是需要控制的。比如一個(gè)查詢(xún)用戶(hù)的界面里面有查詢(xún)用戶(hù)按鈕，添加用戶(hù)按鈕，刪除用戶(hù)按鈕，不同的角色我們得分配不同的權(quán)限2013-12-12
基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能（表單）
這篇文章主要介紹了基于ASP.NET+easyUI框架實(shí)現(xiàn)圖片上傳功能的相關(guān)資料,需要的朋友可以參考下2016-06-06