woshikeen
woshikeen
  • 发布:2016-09-29 14:09
  • 更新:2017-03-28 15:49
  • 阅读:1815

为什么用下拉刷新后会自动调用一遍上拉刷新????

分类:MUI

写了刷新的控件,但是触发下拉刷新后总是会自动上拉刷新一下,页面初期进入是调用的下拉刷新,这个时候并不会自动触发上拉,求解答,在线等~!!!~!~~~~

2016-09-29 14:09 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

放出可以重现问题的测试工程

woshikeen

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 = {

	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
}
}
});

9***@qq.com

9***@qq.com

这个坑还没填上,,,我详细描述下重现场景吧。
当执行了

this.endPullupToRefresh(true);//没有后续数据 停用上拉加载 并显示为‘没有更多数据了’

然后触发了下拉刷新
并重新开启了上拉加载

因为上拉刷新结束会调用

this.endPulldownToRefresh();

进行回弹,动画时长500ms
在回弹动画进行中时触发了

this.refresh(true);//重置上拉加载

我看了下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);

setTimeout(function(_this) {  
    _this.refresh(true);  
}, 600, this);

治本:修改上拉加载的判定条件,使其能区别当页面内容不满一屏时不要触发上拉加载。

该问题目前已经被锁定, 无法添加新回复