利用dropload.min.js实现下拉分页

来源：互联网发布：中国武术是花架子知乎编辑：程序博客网时间：2024/06/16 03:56

<script type="text/javascript" src="/resources/h5/js/dropload.min.js" ></script>

引入上dropload.min.js

在下拉的页面引用

<!-- 评论 --><#if (paginator.contents)?has_content>    <script>        $("#totalItem").val("${(paginator.totalItems)!'0'}");    </script>    <#list paginator.contents as item>        <div class="commentTab clearfix">            <div class="commentTabL">                <img src="${(item.avatarPath)!'/resources/h5/image/guest-avatar.jpg'}" alt="" />            </div>            <div class="commentTabR">                <div class="netName clearfix"><span>${(item.nickName)!''}</span><span>${(item.from)!''}</span></div>                <p>${(item.text)!''}</p>                <!--带图片评论start-->                <#if item.picturePath?exists>                    <div class="commentImgTab clearfix">                        <#list item.picturePath?split(",") as imgPath>                            <#if !imgPath_has_next>                            <#else>                                <img src="${(imgPath)!''}" alt="" />                            </#if>                        </#list>                    </div>                </#if>                <!--带图片评论end-->                <!--全部评论start-->                <#if (item.commentAlls)?has_content>                    <div class="allComment">                        <div class="allCommentDel">                            <#list item.commentAlls as child>                                <p><span>${(child.nickName)!'--'}：</span>${(child.text)!'--'}</p>                            </#list>                        </div>                    </div>                    <#if (item.commentAlls)?size gt 5>                        <!--点击展开全部评论按钮-->                        <a id="all" class="arrow1"></a>                    </#if>                </#if>                <!--全部评论end-->                <div class="commentView">                    <span><i></i>${(item.likeCount)!'0'}</span>                    <span><i></i>${(item.commentCount)!'0'}</span>                </div>            </div>        </div>        <#if !item_has_next>            <script>                $("#lastTimeStr").val("${(item.dataAdded)?string('yyyy-MM-dd HH:mm:ss')}");            </script>        </#if>    </#list></#if><script>    //全部评论    $("#all").click(function(){        $(this).toggleClass("arrow2");        $(".allCommentDel p").not(".allCommentDel p:nth-child(1),.allCommentDel p:nth-child(2),.allCommentDel p:nth-child(3)").slideToggle(300);    })    //宽度    $(".description span:last-child").width($(".wrap").width() - $(".description span:first-child").width()-53);    $(".commentTab .commentTabR").width($(".wrap").width() - $(".commentTab .commentTabL").width()-33);    $(function(){        //点击图片放大显示        $("img").click(function(){            var _this = $(this);//将当前的pimg元素作为_this传入函数            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);        });    });    //下拉加载    $('.element').dropload({        scrollArea : window,        loadDownFn : function(me){            var lastTime = $("#lastTimeStr").val();            var total = $("#totalItem").val();//            console.log(total);            if(lastTime){                var num=$(".commentTab").length;                if(num<total){                    $.get("/h5/comment/"+msgId+"?pageSize="+pageSize+"&lastTime="+lastTime,function(data){                        $("#comment-html").append(data);                    });                }            }        }    });</script>

效果图：

阅读全文

1 0