发现最近大家老有人问刷新样式增多问题,特此总结一份,以便大家参考。
首先,这个插件我理解的也不太深刻,如有错误,望勿喷,提出来大家共同讨论。
其次,这个方法是群中@小盘龙,教我的,我是按照自己的理解加以总结。
最后,望勿喷,望共勉,欢迎大家提出问题、改进。可私聊qq:572948690,备注CSDN,dropload。
先附上一个连接,这个连接中一些问题的解决方法,
https://www.cnblogs.com/tu-0718/p/7459909.html
但是解决样式增多问题($(".dropload-down").remove();)有瑕疵,不推荐使用。这个治标不治本,不能解决下拉刷新时样式增多问题。
/*****************************************************正文结束*************************************************/
首先,这个插件我理解的也不太深刻,如有错误,望勿喷,提出来大家共同讨论。
其次,这个方法是群中@小盘龙,教我的,我是按照自己的理解加以总结。
最后,望勿喷,望共勉,欢迎大家提出问题、改进。可私聊qq:572948690,备注CSDN,dropload。
先附上一个连接,这个连接中一些问题的解决方法,
https://www.cnblogs.com/tu-0718/p/7459909.html
但是解决样式增多问题($(".dropload-down").remove();)有瑕疵,不推荐使用。这个治标不治本,不能解决下拉刷新时样式增多问题。
/*****************************************************正文开始*************************************************/
//公共变量。
var pageNumber = 0;//第几页。
var pageZero = true;//pageZero表示从第一页开始加载数据。
var droploader = null;
/* 有查询条件时,过滤数据方法 */
function droploaderForQuery() {
/****************设置查询条件,加到url中,此处省略。***************************/
pageZero = true;//公共变量,设置页码从第一页开始,否则页码会接着上次查询页码,不会从第一页开始。
$("#list").children().remove();//或者$("#list").html("");一样的功能,清空之前的数据。
// 解锁loadDownFn里锁定的情况,当上一页面翻到最后一页时会锁定。
droploader.unlock();
droploader.noData(false);
droploader.resetload();
}
/*只在页面加载时初始化一次。*/
$(function(){
droploadMethod();
});
/* 上拉加载、下拉刷新方法 */
function droploadMethod() {
droploader = $('#content').dropload({
scrollArea : window,
//上拉加载
loadDownFn : function(me){
var flag = false;
ajaxForContent(me,flag);
},
//下拉刷新
loadUpFn : function(me){
var flag = true;
ajaxForContent(me,flag);
}
});
}
/* 上拉、下拉公共部分提取,避免太多重复代码 */
function ajaxForContent(me,flag) {
//flag为true表示下拉刷新,为false表示表示上拉加载,用于过滤部分代码只在下拉或者上拉时才生效。
//pageZero表示从第一页开始加载数据。
if(flag || pageZero){
pageNumber = 0;
}
pageNumber = parseInt(pageNumber)+1;
var result = "";//拼接html
var url = "“;
//ajax若需要封装,可自行封装,本例中为方便理解不进行封装。
$.ajax({
url: url,
type:'post',
dataType:'json',
async:true,
success: function(data){
var pageCount = data[4];//共多少页
var arrLen = data[0].length;
//如果有数据
if(arrLen > 0){
if(flag){//如果是刷新,则先清空内容,否则会接着往下拼接。
$("#list").html("");
}
for(var i=0; i<arrLen; i++){
result += "拼接内容";
}
pageZero = false;//查到数据之后设置为不是从第一开始。
//如果加载页面超过总页数时
if(pageNumber >= pageCount){
me.lock();// 锁定
me.noData("noMoreData");// 无更多数据
}
// 如果没有数据
}else{
me.lock();// 锁定
me.noData();// 无数据
}
// 插入数据到页面,放到最后面
$("#list").append(result);
// 每次数据插入,必须重置
me.resetload();
if(flag){
// 解锁loadDownFn里锁定的情况
me.unlock();
//如果加载页面超过总页数时
if(pageNumber >= pageCount){
me.lock();// 锁定
}
}
},
error: function(xhr, textStatus, errorThrown){
//可以做自己的提示信息
/**************这里我有个疑惑
原来的demo中这里有如下这段代码,但是我发现有这段代码的话,出错之后就停不下来,只能关闭页面,
而没有下边这段代码也没有什么问题,所以我的代码中去掉了这段代码,若果有知道的大神望告知,qq:572948690
**********************/
// 即使加载出错,也得重置
me.resetload();
}
});
}
/*****************************************************正文结束*************************************************/