页面无限加载

来源：互联网发布：网络活动策划书籍编辑：程序博客网时间：2024/05/22 22:41
无限加载页面

上拉下拉都有对应的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>
云盘资料：
链接：http://pan.baidu.com/s/1o8mPQDc 密码：vhsz
阅读全文
0 0