激情久久久_欧美视频区_成人av免费_不卡视频一二三区_欧美精品在欧美一区二区少妇_欧美一区二区三区的

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術(shù)|正則表達式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務(wù)器之家 - 編程語言 - ASP.NET教程 - ASP.NET仿新浪微博下拉加載更多數(shù)據(jù)瀑布流效果

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

2019-12-19 11:53xiaopinzi ASP.NET教程

本篇文章介紹了如何實現(xiàn)下拉加載更多數(shù)據(jù)瀑布流的效果,這種效果最近很流行,文章內(nèi)容很詳細,有需要的小伙伴參考下吧。

閑來無事,琢磨著寫點東西。貌似頁面下拉加載數(shù)據(jù),瀑布流的效果很火,各個網(wǎng)站都能見到各式各樣的展示效果,原理大同小異。于是乎,決定自己寫一寫這個效果,希望能給比我還菜的菜鳥們一點參考價值。
在開始之前,先把實現(xiàn)的基本原理說一下。當(dāng)夜幕下拉到底部的時候,js可以判斷滾動條的位置,到達底部觸發(fā)js方法,執(zhí)行jquery的ajax方法,向后臺一般處理程序夜幕ashx文件請求數(shù)據(jù)源,得到j(luò)son格式的數(shù)據(jù)源。然后,遍歷json數(shù)據(jù)源,拼接一個li標(biāo)簽,再填充到頁面上去。
首先,我們來做個簡單的html頁面。頁面里需要引入jquery庫,然后用jquery的ajax方法去請求后臺程序,也就是一般處理程序頁面。待會,我會在一般處理程序頁面ashx文件里面寫方法,返回前端頁面所需要的新聞列表數(shù)據(jù)源。數(shù)據(jù)源的格式,我用的json格式。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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());//瀏覽器的高度加上滾動條的高度
        if ($(document).height() <= totalheight)//當(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("程序錯誤,錯誤信息:" + 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>

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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 List<NewsInfo> GetListByPn(int pn)
  {
    List<NewsInfo> NewList = new List<NewsInfo>();
    NewList.Add(new NewsInfo { Num = 0, Ntitle = "華米科技宣布3500萬美元B輪融資 估值超3億美元" });
    NewList.Add(new NewsInfo { Num = 1, Ntitle = "淘汰CAPTCHA!谷歌推改良版CAPTCHA驗證" });
    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億美元投云計算" });
    NewList.Add(new NewsInfo { Num = 5, Ntitle = "Oculus CEO:我是如何邂逅扎克伯格的" });
    NewList.Add(new NewsInfo { Num = 6, Ntitle = "實戰(zhàn):股權(quán)眾籌行業(yè)融資流程介紹" });
    NewList.Add(new NewsInfo { Num = 7, Ntitle = "理財范應(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 = "高盛“免費”為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 = "高盛“免費”為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ò)機器人識別工具reCaptchas" });
    NewList.Add(new NewsInfo { Num = 23, Ntitle = "理財范應(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)時代更要尊重原創(chuàng)和夢想" });
    NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype前員工推出移動即時通訊應(yīng)用Wire" });
    NewList.Add(new NewsInfo { Num = 30, Ntitle = "盤點:2014年Q3美國主要互聯(lián)網(wǎng)企業(yè)財報匯總" });
    NewList.Add(new NewsInfo { Num = 31, Ntitle = "盤點:西方社交媒體與社會資本研究綜述" });
    NewList.Add(new NewsInfo { Num = 32, Ntitle = "陌陌將在IPO同時向阿里巴巴與58同城增發(fā)新股" });
    NewList.Add(new NewsInfo { Num = 33, Ntitle = "從O2O閉環(huán)到推廣通 大眾點評移動廣告創(chuàng)新不斷" });
    NewList.Add(new NewsInfo { Num = 34, Ntitle = "佛山豪車相撞 瑪莎拉蒂沖上花基保時捷" });
    NewList.Add(new NewsInfo { Num = 35, Ntitle = "一汽馬自達高效保養(yǎng)服務(wù)提升品牌價值" });
    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 = "新能源車:強化充電設(shè)施準入門檻" });
    NewList.Add(new NewsInfo { Num = 39, Ntitle = "胡潤豪車報告引爭議 中國汽車文化尚未成熟" });
    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 = "國家放開電動車資質(zhì):誰將站上“風(fēng)口”" });
    NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中國式電動車發(fā)展困境?" });
    NewList.Add(new NewsInfo { Num = 45, Ntitle = "人民日報各抒己見:插電車為何不插電" });
    NewList.Add(new NewsInfo { Num = 46, Ntitle = "評論:“停車場亂象”再證多頭管理之弊" });
    NewList.Add(new NewsInfo { Num = 47, Ntitle = "時事圖說:停車費給了誰" });
    NewList.Add(new NewsInfo { Num = 48, Ntitle = "評論:停車收費之亂不僅在于去向成謎" });
    NewList.Add(new NewsInfo { Num = 49, Ntitle = "評論:“巨額停車費”到底去哪兒了?" });
    NewList.Add(new NewsInfo { Num = 50, Ntitle = "一汽轎車召回部分奔騰B50轎車" });
    NewList.Add(new NewsInfo { Num = 51, Ntitle = "我國進口車月均超11萬輛 SUV是絕對主力車型" });
    NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50%增速搶眼 家用化趨勢拉動商用車企跨界" });
    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è)鏈合作挖掘消費增長.." });
    NewList.Add(new NewsInfo { Num = 58, Ntitle = "用車小貼士:延長愛車壽命10妙招" });
    NewList.Add(new NewsInfo { Num = 59, Ntitle = "溫暖冬日 關(guān)懷延續(xù)昌河汽車續(xù)溫暖傳奇" });
    NewList.Add(new NewsInfo { Num = 60, Ntitle = "業(yè)主與業(yè)委會為何“有仇”?法規(guī)監(jiān)管存空白" });
    NewList.Add(new NewsInfo { Num = 61, Ntitle = "財苑訪談:降息利好房地產(chǎn) 一線城市房價仍然看漲" });
    NewList.Add(new NewsInfo { Num = 62, Ntitle = "王中丙在2014中國海洋經(jīng)濟博覽會論壇上發(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)實后的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)稅立法將迎實質(zhì)性安排" });
    NewList.Add(new NewsInfo { Num = 70, Ntitle = "公交減車減趟 廓清謠言更要讀懂民心【長城時評】" });
    NewList.Add(new NewsInfo { Num = 71, Ntitle = "評論:誰解“亮化工程畫樓”的風(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)有了,但是我們還沒有把數(shù)據(jù)源返回給前端頁面。怎么返回呢?這里用一般處理程序去做,就是后綴名為ashx的文件。接著,我們新建一個一般處理程序頁面。在里面接收前端頁面?zhèn)鬟f過來的參數(shù)pn,就是剛才說到的你下拉頁面的次數(shù)。然后把List數(shù)據(jù)源反序列化為Json字符串,返回給前端頁面。這里我們需要定義一個方法去將List結(jié)構(gòu)的數(shù)據(jù)反序列化為Json格式的字符串。這個方法,我也是在百度上找的。而且,我在返回數(shù)據(jù)源給前端頁面時,讓線程暫停了5秒。因為數(shù)據(jù)量比較少啊,一秒鐘都不需要就能加載出這10條數(shù)據(jù)來,但是你們做的時候可別寫這個暫停,這是說給某些“照抄黨”的,你懂了,就無視吧。
   

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<%@ 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());
        }
      }
    }
    List<NewsInfo> ListQuery = NewsInfo.GetListByPn(pn);
    string ResultJson = "[{\"Num\":-1,\"Ntitle\":\"暫無數(shù)據(jù)\"}]";
    if (ListQuery.Count > 1)
    {
      ResultJson = Obj2Json<List<NewsInfo>>(ListQuery);
    }
    Thread.Sleep(5000);//因為數(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 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)在運行看一下頁面的效果如何。

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

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

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

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

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 欧美五月婷婷 | 久久久99精品视频 | 娇喘视频在线观看 | 亚洲成人欧美在线 | 九草在线| 精品一区二区在线播放 | 亚洲午夜久久久精品一区二区三区 | 青青青在线免费 | 日本黄色a视频 | 天堂成人国产精品一区 | 亚洲欧美aⅴ| 亚洲福利视频52 | 久久国产精品二区 | 欧美黑人伦理 | 久久性生活免费视频 | 羞羞视频免费网站含羞草 | 成人免费av在线播放 | 欧美精品久久久久久久久久 | 成人免费观看49www在线观看 | 久久久国产精品网站 | 午夜精品久久久久久久久久久久久蜜桃 | 黑人日比 | 一级毛片手机在线观看 | 欧美激情图区 | 欧美精品一区自拍a毛片在线视频 | 日韩激情一区二区三区 | 一级大片一级一大片 | 欧美日韩亚洲成人 | 国产久草视频在线 | 91精品国产福利尤物免费 | 欧美一级做一级爱a做片性 毛片电影网址 | 精品一区二区久久久久久久网精 | 中文字幕在线观看视频一区 | 超碰99在线观看 | 青青国产在线视频 | 欧美中文在线 | 视频二区国产 | 久久精品性视频 | 欧美性生活久久 | 成人黄色网战 | 成人免费毛片明星色大师 |