html页面
<!DOCTYPE html>
<html lang="en">
<head><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"><title>首页</title><link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/common.css"><link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/list.css"><link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/jquery-weui.css"><script src="${ctxPath}/assets/familyApp/js/jquery-1.8.3.min.js"></script><script src="${ctxPath}/assets/familyApp/js/common.js"></script></head>
<body class="bgGray" style="overflow: hidden"><header class="topBg"><a href="${ctxPath}/familyApp/index"><img class="back" width="12" src="${ctxPath}/assets/familyApp/images/back.png" alt=""></a>红黑榜
</header><!--内容-->
<div class="content" id="page-ptr" style="overflow-y: auto"><div class="weui-pull-to-refresh-layer"><div class="pull-to-refresh-arrow"></div><div class="pull-to-refresh-preloader"></div><div class="down">下拉刷新</div><div class="up">释放刷新</div><div class="refresh">正在刷新...</div></div><ul class="listBox" id="listBox"><li><a href="listDetail.html"><div><img src="${ctxPath}/assets/familyApp/images/date.png" alt=""><span class="time">2020-04-20</span></div><span class="single text">溪亭镇开展复学学校食堂食品安全检查...</span></a></li></ul><div id="list"></div><div class="weui-infinite-scroll" ><div class="infinite-preloader"></div><!-- 菊花 style="display:none" $("#div").attr("style","display:block");
$("#div").attr("style","display:none");-->正在加载... <!-- 文案，可以自行修改 --></div>
</div><script type="text/javascript">var Feng = {ctxPath: "",addCtx: function (ctx) {if (this.ctxPath === "") {this.ctxPath = ctx;}}};Feng.addCtx("${ctxPath}");
</script>
<script src="${ctxPath}/assets/familyApp/js/jquery-weui.js"></script>
<script src="${ctxPath}/assets/familyApp/js/refreshLoad.js"></script>
</body>
</html>
js页面
/*** Created by 桃子 on 2020/7/29.*/var limit = 8;//每页数据条数
var loading = false; //状态标记
var page = 1;
var maxpage;
$(function () {/*** 页面初始化* @type {string | null}*/ajaxpage(1);//绑定下拉刷新事件if ($("#page-ptr")[0]) {$("#page-ptr").pullToRefresh().on("pull-to-refresh", function () {$('#page-ptr').infinite()$('.weui-infinite-scroll').show().html("正在加载...");console.log("进入下拉刷新功能");//重置参数limit = 15;//每页数据条数loading = false; //状态标记page = 1;var queryData = {};queryData['page'] = page;queryData['limit'] = limit;$.ajax({url: Feng.ctxPath + '/billbardred/listForApp',data: queryData,dataType: 'json',type: 'post',success: function (data) {//下拉刷新时,清空内容列表$("#listBox").empty();$.each(data.data, function (i, item) {$("#listBox").append('<li>\n' +' <a href="listDetail.html">\n' +' <div>\n' +' <img src="' + Feng.ctxPath + '/assets/familyApp/images/date.png" alt="">\n' +' <span class="time">' + item.createDate.substring(0, 10) + '</span>\n' +' </div>\n' +' <span class="single text">' + item.bTitle + '</span>\n' +' \n' +' </a>\n' +' </li>');});maxpage = Math.ceil(data.count / limit); //总数除以每页的条数if (page == maxpage) {$('#page-ptr').destroyInfinite();$('.weui-infinite-scroll').show().html("没有更多数据了");}}})setTimeout(function () {$("#page-ptr").pullToRefreshDone(); // 重置下拉刷新}, 1000); //模拟延迟});}//上滑加载$('#page-ptr').infinite().on("infinite", function () {if (loading) return;loading = true;if (page < maxpage) {page++;ajaxpage(page);}loading = false;});});function ajaxpage(page) {var queryData = {};queryData['page'] = page;queryData['limit'] = limit;$.ajax({type: "post",url: Feng.ctxPath + '/billbardred/listForApp',data: queryData,dataType: 'json',beforeSend: function (xhr) {$('.weui-infinite-scroll').show();},success: function (rs) {$('.weui-infinite-scroll').hide();$.each(rs.data, function (i, item) {$("#listBox").append('<li>\n' +' <a href="listDetail.html">\n' +' <div>\n' +' <img src="' + Feng.ctxPath + '/assets/familyApp/images/date.png" alt="">\n' +' <span class="time">' + item.createDate.substring(0, 10) + '</span>\n' +' </div>\n' +' <span class="single text">' + item.bTitle + '</span>\n' +' \n' +' </a>\n' +' </li>');});maxpage = Math.ceil(rs.count / limit); //总数除以每页的条数if (page == maxpage) {$('#page-ptr').destroyInfinite();$('.weui-infinite-scroll').show().html("没有更多数据了");}},error: function (xhr) {alert('ajax出错');},});
}/*** 暂时先不保留滑块位置*/
/*//一进入界面就进行判断，如果l为null或者空的时候就会执行ajax，并加载第一页的数据，如果不会空就会读取sessionStorage的数据
var l = sessionStorage.getItem('index_list');
if (null !== l && '' !== l) {$("#rank-list").html(l);$(window).scrollTop(sessionStorage.getItem('index_scroll'));//getItem读取上次存的页面位置page = sessionStorage.getItem('index_page');//清空存储的列表数据、存储页码、存储滚动条位置sessionStorage.removeItem('index_list');sessionStorage.removeItem('index_page');sessionStorage.removeItem('index_scroll');
} else {ajaxpage(1);
}const goto = (id) => { //es6箭头函数 当点击列表查看详情的时候就会将列表数据和页码、滚动条位置都存储下来sessionStorage.setItem('index_list', $("#rank-list").html());//存储列表数据sessionStorage.setItem('index_page', page);//存储页码sessionStorage.setItem('index_scroll', $(window).scrollTop());//存储滚动条位置location.href = "js91.html?id=" + id;
}*/