文档章节

一个根据滚动加载的页面(类似懒加载)

窗棂外的月光
 窗棂外的月光
发布于 2015/03/24 10:37
字数 750
阅读 18
收藏 0
$(function() {
        $("#tb").scroll(function(){//内容滚动的Div
            var divHeight = $(this).height();//这个Div的高度
            var nScrollHeight = $(this)[0].scrollHeight;//Div中内容的高度
            var nScrollTop = $(this)[0].scrollTop;//滚动的高度
            if(nScrollTop + divHeight >= nScrollHeight) {//滚动到底
                //alert("到达底部了");
                var pageNumber = $("#pageNumber").val();
                var totalPage = $("#totalPage").val();
                var page = parseInt(pageNumber);
                if(pageNumber==totalPage){
                    $("#footer").empty().text("真的到底啦....").slideDown(200);//提示信息
                }else{
                    ajaxPost(page+1);//加载下一页
                }
            }
        });
    });

滚动监听

加载下一页,将Ajax取得的数据拼接到内容中

function ajaxPost(pageNumber){
        $.ajax({
            url: $("base").attr("href")+'tclassLog/getClassLogs',//地址
            type: "post",
            async: false,
            cache: false,
            data: {classCode:$("#classCode").val(), page: pageNumber},//参数
            dataType: "json",
            timeout: 5000,
            success: function(result) {
                if(!checkEmpty(result))
                    if(typeof(result) == "string")
                        showAlertInfo(result);//如果是报错信息,打印报错信息(可以无视)
                    else
                        appendPost(result);//拼接内容
                else
                    if(pageNumber == 1)
                        $("#footer").empty().text("还没有日志,快来添加吧...");//没有查到内容,默认页数为1.这个是用jFinal中的Page分页的
                    else
                        $("#footer").empty().text("真的到底啦...");//其他页数没有查到内容
            },
            error: function() {
                if(pageNumber == 1)
                    $("#footer").empty().text("网速君不给力....").slideDown(200);//未知情况
                else
                    $("#footer").empty().text("真的到底啦...").slideDown(200);//未知情况
                    
            }
        });
    }

内容拼接

    var classCode = $("#classCode").val();
    var content = "<div class='classlog'><div class='classlog_left'><div><p class='classcontent'>";
    var create = "</p></div><div><span>";
    var time = "</span><span class='classcreate'>&nbsp;&nbsp;创建于&nbsp;&nbsp;</span><span class='classtime'>";
    var deleted = "</span></div></div><div class='classlog_right'><div class='class_left'><a href=\"javascript:deleteClassLog('";
    var adn1 = "','";
    var update = "')\"><span class='glyphicon glyphicon-trash' title='删除'></span></a></div><div class='class_right'><a href=\"tclassLog/modifyClassLog?classCode=";
    var adn2 = "&logId=";
    var end = "\">    <span class='glyphicon glyphicon-pencil' title='编辑'></span></a></div></div></div><div style='height:5px;'></div>";
    
    function appendPost(result){
        var posts = result.list;
        if(posts.length == 0){
            $("#footer").empty().text("没有更多数据...").slideDown(200);
        }else{
            $("#footer").remove();//先去除底部的提示块
            setTimeout(function(){
                for (var i = 0; i < posts.length; i++) {
                    var post = posts[i];
                    var post_dom = $("#tb");
                    post_dom.append(content+post.content+create+post.creater+time+post.createTime+deleted+classCode+adn1+post.logId+update+classCode+adn2+post.logId+end);
                }
                //内容拼好后,添加底部的提示块
                $("#tb").append("<div id='footer' class='footer'><i class='loading_i'></i><span class='loading_text'>正在加载,请稍候...</span></div>");
                autoWinHeight();
            }, 500);
            $("#pageNumber").val(result.pageNumber);
            $("#totalPage").val(result.totalPage);
        }
    }

Div tb的显示

<div id="tb" class="body_content">
        <c:if test="${!empty pg.list}">
        <input type="hidden" id="classCode" value="${classCode}"/> 
        <input type="hidden" id="pageNumber" value="${pg.pageNumber}"/> 
        <input type="hidden" id="totalPage" value="${pg.totalPage}"/> 
            <c:forEach items="${pg.list}" var="log" varStatus="s">
                <div class="classlog">
                    <div class="classlog_left">
                        <div>
                            <p class="classcontent" >${log.content}</p>
                        </div>
                        <div>
                            <span>${log.creater}</span>
                            <span class="classcreate">&nbsp;&nbsp;创建于&nbsp;&nbsp;</span> 
                            <span class="classtime">${log.createTime}</span>
                        </div>
                    </div>
                    <div class="classlog_right">
                        <div class="class_left">
                            <a href="javascript:deleteClassLog('${classCode}','${log.logId}')">
                                <span class="glyphicon glyphicon-trash" title="删除"></span>
                            </a>
                        </div>
                        <div class="class_right">
                            <a href="tclassLog/modifyClassLog?classCode=${classCode}&logId=${log.logId}">
                                   <span class="glyphicon glyphicon-pencil" title="编辑"></span>
                               </a>
                        </div>
                    </div>
                </div>
                <div style="height:5px;"></div>
            </c:forEach>
            <div id="footer" class="footer">
                <i class="loading_i"></i><span>正在加载,请稍候...</span>
            </div>
        </c:if>
        <c:if test="${empty pg.list}">
            <div style="width:100%;margin:auto auto;padding-top:10px;background-color: #fff;min-height: 30px;">
                <P align="center">
                    暂无教育日志数据
                </P>
            </div>
        </c:if>
    </div>

这个核心就是滚动监听,到底部(或距底部一段距离提前加载)时,加载下一页。

最近用到这个,开始想用jquery.lazyload.js的,但是感觉这个更简单





© 著作权归作者所有

共有 人打赏支持
窗棂外的月光
粉丝 0
博文 1
码字总数 750
作品 0
无锡
私信 提问
原生JS实现最简单的图片懒加载

原文地址:原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址:http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载...

axuebin
2017/08/19
0
0
原生JS实现最简单的图片懒加载

试一下自己撸一个图片懒加载... Demo地址:axuebin.com/lazyload 源码地址:github.com/axuebin/laz… 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优...

axuebin
2017/09/27
0
0
微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

     在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系...

eccainiao
07/31
0
0
[译] 使用响应式编程来实现简易版的无限滚动加载

原文链接: hackernoon.com/naive-infin… 本文为 RxJS 中文社区 翻译文章,如需转载,请注明出处,谢谢合作! 如果你也想和我们一起,翻译更多优质的 RxJS 文章以奉献给大家,请点击【这里】...

SangKa
03/07
0
0
浅谈Vue-router的部分高级用法

前言 大家好久不见,上周没来得及写文章,这周终于有时间发布文章了,还是很开心的,至于这篇文章的内容大家就可以看出来不会有很多,并且针对的是已经有初步了解Vue-router的人,好了进入正...

大湿兄
08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
16分钟前
3
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linux-tao
18分钟前
1
0
设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
35分钟前
7
0
mybatis学习(1)

JDBC连接方式: 1.底层没有使用连接池,操作数据库需要频繁的创建和关闭连接,消耗资源。 2.写原生的JDBC代码在JAVA中,一旦需要修改SQL的话(比如表增加字段),JAVA需要整体重新编译,不利...

杨健-YJ
今天
5
0
怎么组织文档

可以从以下几个方面考虑组织文档: ☐ 各种分支的界面截图和对应的类及文件 ☐ 框架或类图 ☐ 流程图 ☐ 时序图 ☐ 注意事项

-___-
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部