MUI上拉加载数据

最新推荐文章于 2024-03-17 23:02:09 发布

黒貓警长

最新推荐文章于 2024-03-17 23:02:09 发布

阅读量183

点赞数

分类专栏： JavaScript Jquery

本文链接：https://blog.csdn.net/qq_43005276/article/details/113363405

版权

JavaScript Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该博客内容涉及移动端页面的搜索功能实现，包括一个输入框和一个筛选图标。此外，详细描述了上拉加载更多数据的实现方式，使用mui库进行下拉刷新和上拉加载，并通过AJAX获取数据。在获取数据成功后，动态构建HTML列表展示数据，并提供了点击事件处理。文章还展示了如何判断数据加载完毕并禁用上拉加载功能。

摘要由CSDN通过智能技术生成

 <div class="mui-content">
        <div class="ferret">
            <div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" placeholder="" id="search">
            </div>
            <span class="mui-icon iconfont icon-shaixuan"></span>
        </div>
        <div class="mui-scroll-wrapper" id="LoadList">
            <div class="mui-scroll">
                <ul class="mui-table-view" id="Load"></ul>
            </div>
        </div>
    </div>

 //上拉加载
    mui('#LoadList').pullRefresh({
        up: {
            height: 50,//可选.默认50.触发上拉加载拖动距离
            auto: true,//可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: function () {
                setTimeout(function () {
                    if ($("#search").val() != "") {
                        getPartaccept();
                    } else {
                        getPartaccept();
                    }
                    //判断新增一页后是否还可以刷新
                    mui('#LoadList').pullRefresh().endPullupToRefresh(totalPage <= windex / loadlength);  //
                }, 1000);
            }
        }
    })

 function getPartaccept() {
       var loadlength=10;
       var page=1;
        $.ajax({
            dataType: "Json",
            type: "post",
            url: Url + "APPQualityControl/APPSupervisionInspection/GetNotificationWhere", //数据接口
            async: true,
            success: function (data) {
                console.log(data);
                if (data == null) {
                    wflag = true;
                    mui.toast("无相关数据");
                }
                else {
                    windex += loadlength;
                    var datapart = data.data;
                    totalPage = data.totlecount;//总页数
                    var str = "";
                    totalPage = ''
                    for (var i in datapart) {
                        var id = datapart[i]["theSer"];
                        console.log(id);
                        var theser = datapart[i]["theSer"] == null ? '' : datapart[i]["theSer"];
                        var NP_Id = datapart[i]["NP_Id"] == null ? '' : datapart[i]["NP_Id"];
                        var N_Statue = datapart[i]["N_Statue"] == null ? '' : datapart[i]["N_Statue"];
                        var P_Name = datapart[i]["P_Name"] == null ? '' : datapart[i]["P_Name"];
                        var N_Code = datapart[i]["N_Code"] == null ? '' : datapart[i]["N_Code"];
                        var N_Id = datapart[i]["N_Id"] == null ? '' : datapart[i]["N_Id"];
                        var U_Name = datapart[i]["U_Name"] == null ? '' : datapart[i]["U_Name"];
                        str += '<li class="mui-table-view-cell">'
                            + '<div class="examine">'
                            + '<span class="incomplete">' + N_Id + '</span>'
                            + '<b>' + P_Name + '</b>'
                            + ' <ul class="engineering">'
                            + ' <li >单位名称：<span>' + U_Name + '</span></li>'
                            + ' <li >通知状态：<span>' + N_Statue + '</span></li>'
                            + ' <li >通知书名称：<span>' + N_Code + '</span></li>'
                            + '</ul>'
                            + '<div>'
                            + ' <div class="remind" >'
                            + '<button  type="button"  οnclick="确定(\'' + theser + '\')" >确定</button>'
                            + '</div >'
                            + '</li >'
                    }
                    $("#Load").html(str);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest + textStatus + errorThrown);
            }
        });
    }