閑來(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í)體類，以此隱射數(shù)據(jù)庫(kù)的表，字段。這里我們創(chuàng)建一個(gè)NewsInfo的實(shí)體類，也就是通常的三層架構(gòu)程序里面的Model里面的類。同時(shí)，我們自定義一些數(shù)據(jù)給他，這個(gè)作為我們的數(shù)據(jù)源。真實(shí)開(kāi)發(fā)環(huán)境下面，這個(gè)都是在DAL里面去連接數(shù)據(jù)庫(kù)，讀取數(shù)據(jù)的。我這里只是用作演示，希望你們懂的。我在實(shí)體類中定義了一個(gè)帶參數(shù)的名為GetListByPn的方法。這個(gè)參數(shù)int類型的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è)類型是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 ListNewsInfo> GetListByPn(int pn)
{
ListNewsInfo> NewList = new ListNewsInfo>();
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打車融資數(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打車融資數(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 = "百車寶 徐小平汽車領(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 = "佛山豪車相撞 瑪莎拉蒂?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ā)組織“車管會(huì)” 保障權(quán)益化解停車難" });
NewList.Add(new NewsInfo { Num = 38, Ntitle = "新能源車：強(qiáng)化充電設(shè)施準(zhǔn)入門(mén)檻" });
NewList.Add(new NewsInfo { Num = 39, Ntitle = "胡潤(rùn)豪車報(bào)告引爭(zhēng)議 中國(guó)汽車文化尚未成熟" });
NewList.Add(new NewsInfo { Num = 40, Ntitle = "725名速騰車主起訴一汽大眾 廠家舉行袖珍溝通會(huì)" });
NewList.Add(new NewsInfo { Num = 41, Ntitle = "特斯拉PK比亞迪 誰(shuí)是新能源車大贏家？" });
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)車資質(zhì)：誰(shuí)將站上“風(fēng)口”" });
NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中國(guó)式電動(dòng)車發(fā)展困境？" });
NewList.Add(new NewsInfo { Num = 45, Ntitle = "人民日?qǐng)?bào)各抒己見(jiàn)：插電車為何不插電" });
NewList.Add(new NewsInfo { Num = 46, Ntitle = "評(píng)論：“停車場(chǎng)亂象”再證多頭管理之弊" });
NewList.Add(new NewsInfo { Num = 47, Ntitle = "時(shí)事圖說(shuō)：停車費(fèi)給了誰(shuí)" });
NewList.Add(new NewsInfo { Num = 48, Ntitle = "評(píng)論：停車收費(fèi)之亂不僅在于去向成謎" });
NewList.Add(new NewsInfo { Num = 49, Ntitle = "評(píng)論：“巨額停車費(fèi)”到底去哪兒了？" });
NewList.Add(new NewsInfo { Num = 50, Ntitle = "一汽轎車召回部分奔騰B50轎車" });
NewList.Add(new NewsInfo { Num = 51, Ntitle = "我國(guó)進(jìn)口車月均超11萬(wàn)輛 SUV是絕對(duì)主力車型" });
NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50%增速搶眼 家用化趨勢(shì)拉動(dòng)商用車企跨界" });
NewList.Add(new NewsInfo { Num = 53, Ntitle = "別克將推全新敞篷車型 或命名\"Velite\"" });
NewList.Add(new NewsInfo { Num = 54, Ntitle = "[深圳]本田鋒范綜合優(yōu)惠2.6萬(wàn)元現(xiàn)車充足" });
NewList.Add(new NewsInfo { Num = 55, Ntitle = "業(yè)內(nèi)人士：汽車電商不會(huì)犧牲經(jīng)銷商利益" });
NewList.Add(new NewsInfo { Num = 56, Ntitle = "11月經(jīng)銷商庫(kù)存指數(shù)再高企" });
NewList.Add(new NewsInfo { Num = 57, Ntitle = "整車企業(yè)牽手租車公司 全產(chǎn)業(yè)鏈合作挖掘消費(fèi)增長(zhǎng).." });
NewList.Add(new NewsInfo { Num = 58, Ntitle = "用車小貼士：延長(zhǎng)愛(ài)車壽命10妙招" });
NewList.Add(new NewsInfo { Num = 59, Ntitle = "溫暖冬日 關(guān)懷延續(xù)昌河汽車?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 = "公交減車減趟 廓清謠言更要讀懂民心【長(zhǎng)城時(shí)評(píng)】" });
NewList.Add(new NewsInfo { Num = 71, Ntitle = "評(píng)論：誰(shuí)解“亮化工程畫(huà)樓”的風(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)有了，但是我們還沒(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ú)視吧。
好了，這個(gè)簡(jiǎn)單的下拉加載更多數(shù)據(jù)的效果就算是做出來(lái)了。雖然沒(méi)有新浪微博那種的高大上，但是基本可以應(yīng)付日常需要的效果。最重要的是，通過(guò)這個(gè)，讓大家明白基本原理吧。
