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

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

分类: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);

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

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