ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

最新推荐文章于 2020-05-20 16:15:24 发布
最新推荐文章于 2020-05-20 16:15:24 发布
阅读量112 收藏 1
点赞数
文章标签： json 数据库 前端 ViewUI
原文链接：http://www.cnblogs.com/pinzi/p/4224965.html
版权

　　闲来无事，琢磨着写点东西。貌似页面下拉加载数据，瀑布流的效果很火，各个网站都能见到各式各样的展示效果，原理大同小异。于是乎，决定自己写一写这个效果，希望能给比我还菜的菜鸟们一点参考价值。

　　在开始之前，先把实现的基本原理说一下。当夜幕下拉到底部的时候，js可以判断滚动条的位置，到达底部触发js方法，执行jquery的ajax方法，向后台一般处理程序夜幕ashx文件请求数据源，得到json格式的数据源。然后，遍历json数据源，拼接一个li标签，再填充到页面上去。

　　首先，我们来做个简单的html页面。页面里需要引入jquery库，然后用jquery的ajax方法去请求后台程序，也就是一般处理程序页面。待会，我会在一般处理程序页面ashx文件里面写方法，返回前端页面所需要的新闻列表数据源。数据源的格式，我用的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 () {
                //console.log("滚动条到顶部的垂直高度: " + $(document).scrollTop());
                //console.log("页面的文档高度 ：" + $(document).height());
                //console.log('浏览器的高度：' + $(window).height());
                //console.log('浏览器的高度加上滚动条的高度：' + parseFloat($(window).height()) + parseFloat($(window).scrollTop()));

                var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//浏览器的高度加上滚动条的高度
                if ($(document).height() <= totalheight)//当文档的高度小于或者等于总的高度的时候，开始动态加载数据
                {
                    $('#LoadingMsg').css('display', 'block');
                    ///ajax存在缓存问题，所以这里加个随机数，让每次请求的参数变化，消除数据缓存的问题。
                    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('没有更多数据了');
                                    $('#LoadingMsg').css('display', 'block');
                                }
                                else {
                                    $("#Listinfo").append("<li>" + item.Num + ".<font color='red'>" + item.Ntitle + "</font></li>");//加载数据
                                }
                            })
                            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>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
                <li>这里是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的新闻标题</li>
            </ul>
            <div style="clear: both"></div>
            <div id="LoadingMsg">
                <span>正在加载，请稍后...</span>
            </div>
        </div>
    </div>
</body>
</html>
　　然后，来看一下代码的页面效果。
　　接下来，我们要创建数据库，连接数据库，读取数据。这样做太麻烦了，我直接用自定义的List数据来做演示了。我平时习惯为数据库每张表都创建一个实体类，以此隐射数据库的表，字段。这里我们创建一个NewsInfo的实体类，也就是通常的三层架构程序里面的Model里面的类。同时，我们自定义一些数据给他，这个作为我们的数据源。真实开发环境下面，这个都是在DAL里面去连接数据库，读取数据的。我这里只是用作演示，希望你们懂的。我在实体类中定义了一个带参数的名为GetListByPn的方法。这个参数int类型的pn参数，你可以理解为你下拉页面的次数。比如当你第一次拉到页面底部的时候，这个参数为1，那我们就读取前N条数据，当你第二次下拉到页面底部的时候，这个参数为2，那我们就读取第N到2N条之间的N条数据，这个就是存储过程分页的原理。这个方法，我返回了一个类型是NewsInfo的List集合，这就是我们传递给前端页面的数据源。

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


/// <summary>
/// NewsInfo 的摘要说明
/// </summary>
public class NewsInfo
{
    public NewsInfo()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    public int Num { get; set; }
    public string Ntitle { get; set; }


    /// <summary>
    /// 根据页码数获取数据
    /// </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 = "社交化新闻聚合网站的未来发展趋势" });
        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 = "实战：股权众筹行业融资流程介绍" });
        NewList.Add(new NewsInfo { Num = 7, Ntitle = "理财范应邀加入中关村互联网金融行业协会" });
        NewList.Add(new NewsInfo { Num = 8, Ntitle = "P2P平台的“羊毛”还能继续撸吗？沉迷易受伤" });
        NewList.Add(new NewsInfo { Num = 9, Ntitle = "美副国务卿：美中都是网络攻击的受害者" });
        NewList.Add(new NewsInfo { Num = 10, Ntitle = "谷歌将推儿童版YouTube和Chrome浏览器" });
        NewList.Add(new NewsInfo { Num = 11, Ntitle = "高盛“免费”为Uber打车融资数亿美元" });
        NewList.Add(new NewsInfo { Num = 12, Ntitle = "观察:支付宝A股挂牌还需迈过几道槛" });
        NewList.Add(new NewsInfo { Num = 13, Ntitle = "优酷土豆刘德乐：多屏合一延伸视听产业新边界" });
        NewList.Add(new NewsInfo { Num = 14, Ntitle = "高盛“免费”为Uber打车融资数亿美元" });
        NewList.Add(new NewsInfo { Num = 15, Ntitle = "趣分期获1亿美金C轮融资 发力白领人群" });
        NewList.Add(new NewsInfo { Num = 16, Ntitle = "优酷土豆刘德乐：多屏合一延伸视听产业新边界" });
        NewList.Add(new NewsInfo { Num = 17, Ntitle = "社交化新闻聚合网站的未来发展趋势" });
        NewList.Add(new NewsInfo { Num = 18, Ntitle = "天天网董事长鞠传国：美妆平台还有上市空间" });
        NewList.Add(new NewsInfo { Num = 19, Ntitle = "百车宝 徐小平汽车领域投资第一单" });
        NewList.Add(new NewsInfo { Num = 20, Ntitle = "美副国务卿：美中都是网络攻击的受害者" });
        NewList.Add(new NewsInfo { Num = 21, Ntitle = "视频网站继续发力硬件 盒子依然是香饽饽" });
        NewList.Add(new NewsInfo { Num = 22, Ntitle = "谷歌推出网络机器人识别工具reCaptchas" });
        NewList.Add(new NewsInfo { Num = 23, Ntitle = "理财范应邀加入中关村互联网金融行业协会" });
        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 = "途牛同程封杀战升级：驴妈妈半路联手途牛" });
        NewList.Add(new NewsInfo { Num = 28, Ntitle = "互联网时代更要尊重原创和梦想" });
        NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype前员工推出移动即时通讯应用Wire" });
        NewList.Add(new NewsInfo { Num = 30, Ntitle = "盘点：2014年Q3美国主要互联网企业财报汇总" });
        NewList.Add(new NewsInfo { Num = 31, Ntitle = "盘点：西方社交媒体与社会资本研究综述" });
        NewList.Add(new NewsInfo { Num = 32, Ntitle = "陌陌将在IPO同时向阿里巴巴与58同城增发新股" });
        NewList.Add(new NewsInfo { Num = 33, Ntitle = "从O2O闭环到推广通 大众点评移动广告创新不断" });
        NewList.Add(new NewsInfo { Num = 34, Ntitle = "佛山豪车相撞 玛莎拉蒂冲上花基保时捷" });
        NewList.Add(new NewsInfo { Num = 35, Ntitle = "一汽马自达高效保养服务提升品牌价值" });
        NewList.Add(new NewsInfo { Num = 36, Ntitle = "一汽大众速腾后悬架断裂事件持续 案例信息采集中" });
        NewList.Add(new NewsInfo { Num = 37, Ntitle = "居民自发组织“车管会” 保障权益化解停车难" });
        NewList.Add(new NewsInfo { Num = 38, Ntitle = "新能源车：强化充电设施准入门槛" });
        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万优惠送5000大礼包" });
        NewList.Add(new NewsInfo { Num = 43, Ntitle = "国家放开电动车资质：谁将站上“风口”" });
        NewList.Add(new NewsInfo { Num = 44, Ntitle = "特斯拉能否打破中国式电动车发展困境？" });
        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 = "[深圳]本田锋范综合优惠2.6万元现车充足" });
        NewList.Add(new NewsInfo { Num = 55, Ntitle = "业内人士：汽车电商不会牺牲经销商利益" });
        NewList.Add(new NewsInfo { Num = 56, Ntitle = "11月经销商库存指数再高企" });
        NewList.Add(new NewsInfo { Num = 57, Ntitle = "整车企业牵手租车公司 全产业链合作挖掘消费增长.." });
        NewList.Add(new NewsInfo { Num = 58, Ntitle = "用车小贴士：延长爱车寿命10妙招" });
        NewList.Add(new NewsInfo { Num = 59, Ntitle = "温暖冬日 关怀延续昌河汽车续温暖传奇" });
        NewList.Add(new NewsInfo { Num = 60, Ntitle = "业主与业委会为何“有仇”？法规监管存空白" });
        NewList.Add(new NewsInfo { Num = 61, Ntitle = "财苑访谈：降息利好房地产 一线城市房价仍然看涨" });
        NewList.Add(new NewsInfo { Num = 62, Ntitle = "王中丙在2014中国海洋经济博览会论坛上发表主旨.." });
        NewList.Add(new NewsInfo { Num = 63, Ntitle = "地板同质化需要业内企业共同作用" });
        NewList.Add(new NewsInfo { Num = 64, Ntitle = "房地产永久产权成为现实后的9大猜想，你懂的" });
        NewList.Add(new NewsInfo { Num = 65, Ntitle = "世茂媒体行：世茂是如何将擅长的别墅做到了极致" });
        NewList.Add(new NewsInfo { Num = 66, Ntitle = "评论：小蛮腰巨亏 买单的是你我" });
        NewList.Add(new NewsInfo { Num = 67, Ntitle = "“房屋永久产权“引发热议 “老房子“反而更卖座" });
        NewList.Add(new NewsInfo { Num = 68, Ntitle = "电器起火为何不能用水浇" });
        NewList.Add(new NewsInfo { Num = 69, Ntitle = "贾康：房地产税立法将迎实质性安排" });
        NewList.Add(new NewsInfo { Num = 70, Ntitle = "公交减车减趟 廓清谣言更要读懂民心【长城时评】" });
        NewList.Add(new NewsInfo { Num = 71, Ntitle = "评论：谁解“亮化工程画楼”的风情？" });
        //这里是Linq to List的查询语句，不懂的话，百度一下相关的知识吧。如果你不懂也没事，你可以用数据库做数据源，通过ADO五大对象去操作或者是更简单的SqlHelper.cs这种数据库操作类去读取指定的数据。
        List<NewsInfo> ListQuery = (from n in NewList where (n.Num >= 10 * pn && n.Num < 10 * (pn + 1)) select n).ToList();
        return ListQuery;
    }
}

　　现在，我们数据源已经有了，但是我们还没有把数据源返回给前端页面。怎么返回呢？这里用一般处理程序去做，就是后缀名为ashx的文件。接着，我们新建一个一般处理程序页面。在里面接收前端页面传递过来的参数pn，就是刚才说到的你下拉页面的次数。然后把List数据源反序列化为Json字符串，返回给前端页面。这里我们需要定义一个方法去将List结构的数据反序列化为Json格式的字符串。这个方法，我也是在百度上找的。而且，我在返回数据源给前端页面时，让线程暂停了5秒。因为数据量比较少啊，一秒钟都不需要就能加载出这10条数据来，但是你们做的时候可别写这个暂停，这是说给某些“照抄党”的，你懂了，就无视吧。　　

<%@ 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\":\"暂无数据\"}]";
        if (ListQuery.Count > 1)
        {
            ResultJson = Obj2Json<List<NewsInfo>>(ListQuery);
        }
        Thread.Sleep(5000);//因为数据量比较少，这里线程暂停5秒，让页面出现数据加载等待的效果
        context.Response.Write(ResultJson);
    }
 
    /// <summary>
    /// List转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;
        }
    }
}

　　代码就是这些了，现在运行看一下页面的效果如何。
 

　　好了，这个简单的下拉加载更多数据的效果就算是做出来了。虽然没有新浪微博那种的高大上，但是基本可以应付日常需要的效果。最重要的是，通过这个，让大家明白基本原理吧。最后，附上程序源码。

转载于:https://www.cnblogs.com/pinzi/p/4224965.html

weixin_30867015
关注
广州.Net+Android训练营 课程体系4.1版
gzcz2545119563的专栏
04-18 3136
--- 总学时3个月 重要升级信息： a.加入.Net for Android 和 Unity3D游戏开发，.Net也可以开发 Android/IOS 的3D游戏啦！ 1. Part1.0：.Net基础加强、数据库操作、三层架构 Part1.1：C#基础增强 核心技术课程 1.C#基础加强：属性原理、OOP高级、多态、多态的两种代码表现形式、静态
web端上拉加载更多信息
Im_qingfeng的博客
06-28 669
data() { return { list: [], activeIndex: -2, isbottom: -2 }; mounted() { var _this = this; axios .post(`api`, { size:10 }) .then(function(d...
asp点击加载更多 向下翻页样式 实例源码
04-17
asp点击加载更多 向下翻页样式 实例源码 已经实测过绝对的好用。
asp实现ajax点击加载更多
点滴分享博客
05-20 578
首先定义自己的文章结构 <div class="news"> <ul class="list"> <li class="flex-between"> <img src="images/1.jpg" alt=""> <div> <p><a href="{$list.url}" title
ASP.NET加载更多
liufang1991的专栏
11-08 1288
实际上要想加载更多，应该在滑动过程中判断这样会更顺畅，但是为了简单，只是做到快到滚动条底部的判断 另外，还可以在底部加个东西正在加载中，这样用户体验会更好 显示页面html或者aspx都可以，需要添加jquery javascript部分 var count = 1; var loaded = true; //是否可以加载数据 $(function
ASP无刷新加载更多1.3【支持本地调试】
10-17
ASP无刷新加载更多1.3【支持本地调试】
ASP.NET实现下拉加载更多数据瀑布流效果教程
"ASP.NET仿新浪微博下拉加载更多数据瀑布流效果" 在ASP.NET开发中，实现下拉加载更多数据的瀑布流效果是一个常见的需求，这种效果常见于社交媒体、新闻网站等，可以提升用户体验，减少页面加载时间。本教程将详细...
ASP.NET实现微博风格瀑布流下拉刷新数据
总结来说，本文为读者提供了一个基本的框架，展示了如何使用ASP.NET、jQuery和JSON技术来创建具有瀑布流效果的下拉加载更多数据功能。通过这个教程，新手开发者可以了解到如何将前端交互与后端数据处理结合起来，以...
asp.net点击 查看更多 实现无刷新加载的实现代码
10-28
asp.net点击 查看更多 实现无刷新加载的实现代码，需要的朋友可以参考下
通过ajax请求实现加载更多——常见的问题
candy_tity的博客
11-25 6458
这里tity主要给大家讲两个问题： 一是加载中动画，二是关于“没有更多了”的判断。一、加载中动画，可以增强用户体验度，给用户一种当前页面正在处理的感觉，而不是没有任何反应，让用户感觉摸不着头脑。 实现方法：在ajax请求中添加beforeSend方法。 示例代码：<script type="text/javascript"> $('#getMore').click(function()
jQuery+Asp.net 实现简单的下拉加载更多功能
weixin_30871293的博客
04-13 306
原来做过的商城项目现在需要增加下拉加载的功能，简单的实现了一下。大概可以整理一下思路跟代码。 把需要下拉加载的内容进行转为JSON处理存在当前页面： <script type="text/javascript">var objson = eval([{"Id":"5991","product_name":"正品璐瑶颈肩按摩器 披肩颈椎按摩","order_by":"98569...
仿新浪微博下拉加载更多数据瀑布流效果
01-13
简单的模仿了新浪微博下拉页面到底部加载更多数据的瀑布流效果，用List做模拟数据源，做的非常简单，仅供学习参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值