<!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" >
<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" >
<!--下拉刷新-->
<div class="weui-pull-to-refresh__layer" >
<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 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="咿儿呀" >
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">大河向东流</h4>
<p class="weui-media-box__desc" >发电 </p>
<p class="weui-media-box__desc" >182.3</p>
<p class="weui-media-box__desc" > 度</p>
<p class="weui-media-box__desc" >14:12:18</p>
<span hidden="hidden" name="stationId" value="">21</span>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-loadmore" >
<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" >\n' +
' <span class="weui-loadmore__tips">暂无数据</span>\n' +
' </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="名称名称" >';
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" >温度 </p>';
html += '<p class="weui-media-box__desc" >' + data[i].etoday + '</p>';
html += '<p class="weui-media-box__desc" > 度</p>';
html += '<p class="weui-media-box__desc" >' + data[i].updateTime + '</p>';
html += '<span hidden="hidden" >;
html += '</div>';
html += '<div class="weui-cell__ft"></div>'
}
$("#Tolist").append(html);
}
else {
html += '<div class="weui-loadmore_line" >\n' +
' <span class="weui-loadmore__tips">暂无数据</span>\n' +
' </div>';
$("#Tolist").append(html);
loading =true;
}
$(".weui-loadmore").hide();
}
});
}
</script>
</body>
</html>