var taskId = document.getElementById("taskId").value;
var userId = document.getElementById("userId").value;
var pageSize = 15;
var pageNum = 0;
var type = 0;
//TODO:下拉刷新会触发上拉
var taskCommentPublish = {
pulldownRefresh:function() {
setTimeout(function() {
pageNum = 0;
type=1;//代表下拉刷新
taskCommentPublish.getResult(type);
}, 100);
},
pullupRefresh:function() {
setTimeout(function() {
pageNum = pageNum+1;//翻下一页
type=2;//代表上拉加载
taskCommentPublish.getResult(type);
}, 100);
},
getResult:function(type){
integral.ajaxGet(integral.basePath+"/taskComment/"+pageNum+"/"+pageSize+"/"+taskId+"/getTaskComment.json",
null,function(jsonData) {
if(jsonData.success){
//taskMinuteCommon.createTaskInfo(jsonData.data.taskInfo,1,false);
alert(type);
if(type==1){
alert('dowm');
taskComment.emptyCommentList();
taskComment.createCommentList(jsonData.data.taskComments);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(true);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
mui('#pullrefresh').pullRefresh().refresh(true);
if(type==2){//上拉加载
alert('up')
taskComment.emptyCommentList();
taskComment.createCommentList(jsonData.data.taskComments);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(true);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
if (jsonData.data.commentCount < pageSize || jsonData.data.commentCount==0){
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(true);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
}else{
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(true);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
alert(jsonData.message);
}
});
},
submit:function(){
//发布按钮
document.getElementById('subComment').addEventListener('tap', function(event) {
var taskComment = {};
taskComment.taskId = taskId;
taskComment.commentUserid = {};
taskComment.commentUserid.id = userId;
taskComment.commentRemark = document.getElementById("commentRemark").value;
//TODO:how?
taskComment.commentAtid = document.getElementById("commentRemark").value;
if (taskCommentPublish.validate(taskComment)) {
taskCommentPublish.apply(taskComment);
}else{
}
},false);
//返回
// document.getElementById('back').addEventListener('tap', function(event) {
// //TODO:
// alert('back');
// },false);
},
apply : function(taskComment){
integral.ajaxPost(integral.basePath+"/taskComment/addTaskComment.json",
taskComment,function(jsonData) {
if(jsonData.success){
integral.showToast(jsonData.message);
}else{
integral.showToast(jsonData.message);
}
});
},
validate : function(taskComment){
if (integral.isNull(taskComment.commentRemark)) {
integral.showToast("评论内容不能为空");
return false;
}
return true;
}
};
taskCommentPublish.pulldownRefresh();
taskCommentPublish.submit();
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {//下拉刷新
// auto:true,//可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: taskCommentPublish.pulldownRefresh
},
up: {//上拉加载
// auto:true,//可选,默认false.自动上拉加载一次
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: taskCommentPublish.pullupRefresh
}
}
});
3 个回复
赵梦欢 - 专注前端,乐于分享!
放出可以重现问题的测试工程
woshikeen (作者)
var taskId = document.getElementById("taskId").value;
var userId = document.getElementById("userId").value;
var pageSize = 15;
var pageNum = 0;
var type = 0;
//TODO:下拉刷新会触发上拉
var taskCommentPublish = {
// document.getElementById('back').addEventListener('tap', function(event) {
// //TODO:
// alert('back');
// },false);
},
};
taskCommentPublish.pulldownRefresh();
taskCommentPublish.submit();
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {//下拉刷新
// auto:true,//可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: taskCommentPublish.pulldownRefresh
},
up: {//上拉加载
// auto:true,//可选,默认false.自动上拉加载一次
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback: taskCommentPublish.pullupRefresh
}
}
});
9***@qq.com
这个坑还没填上,,,我详细描述下重现场景吧。
当执行了
然后触发了下拉刷新
并重新开启了上拉加载
因为上拉刷新结束会调用
进行回弹,动画时长500ms
在回弹动画进行中时触发了
我看了下refresh的代码。它调用了enablePullupToRefresh;
条件1:执行endPulldownToRefresh后,下拉刷新回弹动画进行中(500ms)。
条件2:mui('.mui-pull-bottom-pocket')底边的距离>1,(经测试触发上拉刷新的距离是>1而不是文档中说的50)。
条件3:此时执行了refresh或者enablePullupToRefresh。
猜想:在下拉刷新完毕动画回弹过程中执行了enablePullupToRefresh,进而触发了上拉事件的判定,又因数据内容不满一屏幕,所以mui('.mui-pull-bottom-pocket')没有被顶到页面底部而造成滑动组件的下边框与底边距离大于1,满足了上拉加载的判定条件而触发了上拉加载。
治标:延迟执行refresh(true);
治本:修改上拉加载的判定条件,使其能区别当页面内容不满一屏时不要触发上拉加载。