<!DOCTYPE html> <html> <head> <title>滚动加载</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. "> <link rel="stylesheet" href="../../assets/css/weui.min.css"> <link rel="stylesheet" href="../../assets/css/jquery-weui.min.css"> <script type="text/javascript" src="../../assets/js/jquery/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="../../assets/js/jquery-weui.min.js"></script> <script type="text/javascript" src="../../assets/js/swiper.js"></script> </head> <body ontouchstart> <div class="content" style="background-color: #FFFFFF; 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;"> <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto; z-index: 1"> <!--下拉刷新--> <div class="weui-pull-to-refresh__layer" style="padding: 5px;"> <div class="weui-pull-to-refresh__arrow"></div> <div class="weui-pull-to-refresh__preloader"></div> <div class="down">下拉刷新</div> <div class="up">释放刷新</div> <div class="refresh">正在刷新</div> </div> <div class="weui-panel weui-panel_access"> <div class="weui-panel__hd">信息信息</div> <div id="Tolist" class="weui-form-preview"> <!--内容展示区域--> <a href="/wx/station/21" class=" weui-cell_access weui-media-box weui-media-box_appmsg"> <div class="weui-media-box__hd"> <img class="weui-media-box__thumb" src="https://e-charging.oss-cn-hangzhou.aliyuncs.com/plant/plant4.jpg@!650w" alt="咿儿呀" style="60px; height:60px; margin-right:5px;display:block"> </div> <div class="weui-media-box__bd"> <h4 class="weui-media-box__title">大河向东流</h4> <p class="weui-media-box__desc" style="float: left">发电 </p> <p class="weui-media-box__desc" style="float: left">182.3</p> <p class="weui-media-box__desc" style="float: left"> 度</p> <p class="weui-media-box__desc" style="float: right">14:12:18</p> <span hidden="hidden" id="stationId" name="stationId" value="">21</span> </div> <div class="weui-cell__ft"></div> </a> </div> <div class="weui-loadmore" style="padding-bottom:30px;height:20px"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> </div> </div> </div> </div> <script> var pages = 1; var sizes = 7; var total = 0; var loading = false; $(function () { loadlist(); loading = false; //状态标记 }) //=========================下拉刷新 $("#listwrap").pullToRefresh().on("pull-to-refresh", function () { setTimeout(function () { pages = 1; $("#Tolist").html(""); loadlist(); if (loading) loading = false; $("#listwrap").pullToRefreshDone(); // 重置下拉刷新 }, 1500); //模拟延迟 }); //============================滚动加载 $("#listwrap").infinite().on("infinite", function () { if (loading) return; loading = true; pages++; //页数 $('.weui-loadmore').show(); setTimeout(function () { loadlist(); loading = false; }, 1500); }); // =======加载数据loadlist(); function loadlist() { var html = ""; $.ajax({ type: "POST", url: "/wx/station/list", data: { 'page': pages, 'limit': sizes, 'ssUserId': $('#ssUserId').value = 311 }, dataType: "json", error: function (request) { $(".weui-loadmore").hide(); html += '<div class=" weui-loadmore_line" style="65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center"> ' + ' <span class="weui-loadmore__tips">暂无数据</span> ' + ' </div>'; $("#Tolist").append(html); }, success: function (page) { let data = page.records; total = page.total; if (data.length > 0) { for (var i = 0; i < data.length; i++) { html += '<a href="/wx/station/' + data[i].id + '" class=" weui-cell_access weui-media-box weui-media-box_appmsg">'; html += '<div class="weui-media-box__hd">'; html += '<img class="weui-media-box__thumb" src="' + data[i].thumbUrl + '"' + 'alt="名称名称" style="60px; height:60px; margin-right:5px;display:block">'; html += '</div>'; html += '<div class="weui-media-box__bd">'; html += '<h4 class="weui-media-box__title" >' + data[i].name + '</h4>'; html += '<p class="weui-media-box__desc" style="float: left">温度 </p>'; html += '<p class="weui-media-box__desc" style="float: left">' + data[i].etoday + '</p>'; html += '<p class="weui-media-box__desc" style="float: left"> 度</p>'; html += '<p class="weui-media-box__desc" style="float: right">' + data[i].updateTime + '</p>'; html += '<span hidden="hidden" id="stationId" name="stationId" value="">' + data[i].id + '</span>'; html += '</div>'; html += '<div class="weui-cell__ft"></div>' } $("#Tolist").append(html); } else { html += '<div class="weui-loadmore_line" style="65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center"> ' + ' <span class="weui-loadmore__tips">暂无数据</span> ' + ' </div>'; $("#Tolist").append(html); loading =true; } $(".weui-loadmore").hide(); } }); } </script> </body> </html>