页面无限加载

最新推荐文章于 2024-04-25 18:07:56 发布

昼不可以

最新推荐文章于 2024-04-25 18:07:56 发布

阅读量719

点赞数

分类专栏：插件文章标签：插件页面无限加载

本文链接：https://blog.csdn.net/yy_cly/article/details/78479469

版权

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

无限加载页面

上拉下拉都有对应的ajax方法，下拉刷新，上拉加载更多

<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>

<%@include file="../taglib.jsp" %>

<html>
<link rel="stylesheet" href="${path}/css/picbox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="${path}/css/home.css" type="text/css"/>
<script type="text/javascript" src="${path}/js/picbox.js"></script>
<script type="text/javascript" src="${path}/js/e-smart-zoom-jquery.min.js"></script>
<link rel="stylesheet" href="${path}/css/dropload.css">
<script type="text/javascript" src="${path}/js/dropload.min.js"></script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>服药反馈</title>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        setTimeout(function () {
            $(".example-image-link").each(function () {
                var href = $(this).attr("href");
                if ("${path}/img/images/blue-loading.gif" == $(this).find("img").attr("src")) {
                    $(this).find("img").attr("src", href);
                }
            });
        }, 500);
    });
    // 页数
    var page = 0;
    // 每页展示5个
    var size = 5;

    var serviceTypeNum =${serviceType};
    if (serviceTypeNum == "1") {
        var serviceType = "0001";
    } else if (serviceTypeNum == "5") {
        var serviceType = "0005";
    }
    var serviceId =${serviceId};


    $('.feedbackClass').dropload({
        scrollArea: window,
        domDown: {
            domClass: "dropload-down",
            domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData: '<div class="dropload-noData">暂无数据</div>'
        },
        loadDownFn: function (me) {
            page++;
            $.ajax({
                type: "POST",
                url: "${path}/memberService/getFeedBackInfoLoad",
                data: {
                    "serviceId": serviceId,
                    "serviceType": serviceType,
                    "page": page,
                    "size": size
                },
                async: true,
                success: function (data) {
                    var result = "";
                    if (data.mr.medicalRecordFormList != null && data.mr.medicalRecordFormList.length > 0) {
                        $.each(data.mr.medicalRecordFormList, function (index, mrf) {
                            result += '<div class="content_module_box medicalrf">' +
                                    '<div class=mrfcreatetime>' +
                                    '<span>' + mrf.createTime + '</span>&nbsp;&nbsp;<span style="color: black">病人：' + mrf.userName + '</span>' +
                                    '</div>' +
                                    '<div class="medicaldesc"><span>&nbsp;&nbsp;&nbsp;&nbsp;' + mrf.medicalDesc + '</span></div>' +
                                    '<div class="in-box boxall" style="overflow: hidden;">' +
                                    '<dl>';
                            if (mrf.attchList != null && mrf.attchList.length > 0) {
                                $.each(mrf.attchList, function (index, attch) {
                                    if (attch.attchId != null && attch.attchId != "") {
                                        result += '<dd>' +
                                                '<a class="example-image-link" href="${path}/download/image?fileId=' + attch.attchId + '" rel="lightbox-group">' +
                                                '<img src="${path}/img/images/blue-loading.gif" alt="' + attch.docName + '" style="opacity: 1">' +
                                                '</a>' +
                                                '</dd>';
                                    }
                                });
                            }
                            result += '</dl>' +
                                    '</div>' +
                                    '</div>';
                        });
                        // 插入数据到页面，放到最后面
                        $('.feedbackClass').append(result);
                        $("a[rel^='lightbox']").picbox({/* Put custom options here */}, null, function (el) {
                            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                        });
                        setTimeout(function () {
                            $(".example-image-link").each(function () {
                                var href = $(this).attr("href");
                                if ("${path}/img/images/blue-loading.gif" == $(this).find("img").attr("src")) {
                                    $(this).find("img").attr("src", href);
                                }
                            });
                        }, 500);
                        // 每次数据插入，必须重置
                        me.resetload();
                    } else {
                        // 锁定
                        me.lock();
                        // 无数据
                        if (page == 1) {
                            $("#feedbackEmptyId").css("display", "block");
                        } else {
                          //  me.noData();
                            var tips = '<div class="dropload-down"><div class="dropload-noData">暂无更多数据</div></div>';
                            $('.feedbackClass').append(tips);
                        }
                    }
                },
                error: function (xhr, type) {
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
    });

    $("#pbOverlay").remove();
    $("#pbImage").remove();
    $("#pbBottom").remove();
</script>

<div>
    <div>
        <div class="feedbackClass">
        </div>
    </div>
</div>

<div class="no_data_div" id="feedbackEmptyId" style="display: none;margin: 0 auto;padding: 150px">
    <img src="${path}/img/no_data.png">
    <span>暂无数据</span>
</div>
</body>
</html>