一、思路分析
今天写程序遇到了手机端的分页问题,以前没遇到过类似问题,pc端的分页都是有几个按钮,可以自主选择分页。但是手机端的之前没遇到过,后来的解决方案是加了一个loading的gif图片,然后看完一页之后先加载loading图片,然后等到接口请求成功之后,显示接口请求的内容,把loading图标隐藏。如此反复,知道最后一页,就显示已经到底部了。
二、代码如下
var pageIndex = 1; //当前是第几页
var pageSize = 10; //每页条数
$(".infinite-scroll-preloader").hide();
var isMore = false;
getItems(pageIndex,pageSize);
//获取数据列表
function getItems(pageIndex,pageSize) {
$(".infinite-scroll-preloader").show();
if (!isMore) {
isMore = true;
$.ajax({
type: "GET",
url: "/home/notice",
data:{
"pageIndex":pageIndex,
"pageSize":pageSize
},
success: function (json) {
if(json.code=="200"){
if(json.data.list!=null&&json.data.list!=undefined&&json.data.list.length>0){
isMore = false;
var htm = '';
json.data.list.forEach(function(item,index){
if(item.title.length>20){
item.title = item.title.slice(0,19)+"...";
}
htm += "<a href=\"../apppage/news.html?newsid="+item.id+" \">"
htm += " <div class=\"row\">";
htm += " <div class=\"content-inner\">";
htm += " <p class=\"title\">"+item.title+"</p>";
htm += " <p class=\"date\">"+item.showDate+"</p>";
htm += " <i></i>";
htm += " </div>";
htm += " </div>";
htm += "</a>";
});
}else{
$(".infinite-scroll-preloader").text("已经到底部了");
$(".infinite-scroll-preloader").css({"fontSize": "14px", "color": "#544f4f","textAlign":"center"})
}
// 故意做的延迟
setTimeout(function(){
clearInterval(timer);
$('.announce-wrap').append(htm);
},600);
}else {
clearInterval(timer);
alert(json.message);
}
},
error: function (request) {
clearInterval(timer);
alert("请求数据错误");
}
});
}
}
//上滑无限加载
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight >= scrollHeight) {
if (!isMore) {
timer = setInterval(rotate, 50);
pageIndex++;
getItems(pageIndex,pageSize);
}
}
});
//无线加载图标旋转
var i = 0;
function rotate() {
i += 30;
$(".preloader").css("transform", "rotateZ(" + (i) + "deg)");
if(i>=360){
i = 0;
}
}
var timer = setInterval(rotate, 50);
这上面的代这种问题,有的代码有注释,有的没有注释,比较重要的地方我都写了注释,如果自己什么时候再遇到这种问题,可以打开这段代码看看,然后模仿这个代码写,这是我一直工作的习惯,如果遇到一个对自己来说很陌生很棘手的问题,就写个博客记录一下,这样以后再遇到类似问题就可以直接过来看,直接拿走用了。