关于上拉加载的奇怪问题

页面代码完整的贴一下

小微 (作者)

main.html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>  
        <h1 class="mui-title">测试</h1>  
        <a class="mui-icon mui-icon-plusempty mui-pull-right" id="add"></a>  
    </header>  

    <script type="text/javascript" charset="utf-8">  
        mui.init({  
             keyEventBind:{  
                backbutton:false  
             },  
             swipeBack: false,  
             subpages:[{  
              url:'content.html',  
              id:'content',  
              styles:{  
                top:'48px',//mui标题栏默认高度为48px；  
                bottom:'0px'//默认为0px，可不定义；  
              }  
            }]  
        });  

        mui.plusReady(function() {  
            //todo  
        });  

    </script>  
</body>  
</html>

content.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <script src="js/srm.js"></script>  
    <script src="js/jquery-1.11.1.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link href="css/srm.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init({  
            keyEventBind:{  
                backbutton:false  
            }  
        });  
    </script>  
</head>  
<body>  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
      <div class="mui-scroll">  
        <div class="mui-input-row mui-search">  
            <input id="searchKey" type="search"  placeholder="搜索">  
        </div>  
        <ul  id="content" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>  
      </div>  
      <div class="mui-loader srm-loader" id="loading">加载中...</div>  
    </div>  

    <script type="text/javascript" charset="utf-8">  
            var searchKey = "";  
            var page = 1;  
            var hasMore = true;  
            mui.init({  
                pullRefresh : {  
                    container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等  
                    down : {  
                      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
                      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
                      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
                      callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                    },  
                    up : {  
                      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容  
                      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；  
                      callback :loadMore //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                    }  
                }  
            });  

            function makeHtml(page,clearData){  
                var url = plus.storage.getItem("serverPath")+"/nb/qd/getdata";  
                mui.ajax(url,{  
                    dataType:'json',  
                    data:{page:page,go:"go",searchKey:searchKey},  
                    type:'post',  
                    timeout:10000,//超时时间设置为10秒；  
                    success:function(result){  
                        var _html = [];  
                        if(result.data){  
                            for(var i in result.data){    
                                _html.push("<li class='mui-table-view-cell' id='"+result.data[i].id+"'>");  
                                _html.push("<div class='mui-slider-right mui-disabled'><a class='mui-btn mui-btn-red' name='"+result.data[i].id+"'>删除</a></div>");  
                                _html.push("<div class='mui-table-cell mui-col-xs-6  mui-slider-handle'>");  
                                _html.push("<h5>作者："+result.data[i].ownname+"</h5>");  
                                _html.push("<p class='mui-h6 mui-ellipsis'>类别:"+nullTran(result.data[i].type,'')+"</p>");  
                                _html.push("<p class='mui-h6 mui-ellipsis'>地址:"+nullTran(result.data[i].address,'')+"</p>");  
                                _html.push("<p class='mui-h6 mui-ellipsis'>说明:"+nullTran(result.data[i].content,'')+"</p>");  
                                _html.push("</div>");     

                                _html.push("<div class='mui-table-cell mui-col-xs-6 mui-text-right'>");  
                                _html.push("<span class='mui-h5'>"+result.data[i].createtime+"</span>");  
                                _html.push("</div>");     
                                _html.push("</li>");      
                            }  

                        }else{  
                            _html.push("<li class='mui-table-view-cell crm-text-align'>");  
                            _html.push("暂无数据");  
                            _html.push("</li>");  
                        }  

                        var loading = document.getElementById("loading");  
                        if(loading){  
                            document.getElementById("pullrefresh").removeChild(loading);  
                        }  

                        if(clearData){  
                            jQuery('#content').html(_html.join(""));  
                        }else{  
                            jQuery('#content').append(_html.join(""));  
                        }  

                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();   

                        if(result.curPage<result.pageCount){  
                            mui('#pullrefresh').pullRefresh().refresh(true);  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
                        }else{  
                            hasMore = false;  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
                        }  
                    },  
                    error:function(xhr,type,errorThrown){  
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();   
                    }  
                });  
            }  

            function pulldownRefresh(){  
                    mui('#pullrefresh').pullRefresh().refresh(true);  
                    hasMore = true;  
                    page = 1;  
                    makeHtml(1,true);  
                }  
            }  

            function loadMore(){  
                if(hasMore){  
                    page++;  
                    makeHtml(page,false);  
                }else{  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
                }  

            }  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        pulldownRefresh();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    pulldownRefresh();  
                });  
            }  

            document.getElementById("searchKey").addEventListener('input',function(){  
                 //todo  
            });  
    </script>  
</body>  
</html>

现在的问题是，上拉加载后，苹果后机会自动滚到最上面

DCloud_UNI_FXY

知道原因了，因为你不管下拉刷新还是上拉加载，每次都调用了

mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

导致上拉加载结束的时候，一调用endPulldownToRefresh(),就会回到顶部。

目前你可以自己识别一下，不要再上拉加载的时候调用endPulldownToRefresh。

后续版本我们会优化一下，避免这种情况的发生

小微 (作者)

非常感谢

vinck

上拉加载，怎么避免重复提交呢？
上拉屏幕的时候，加载出数据的速度有点慢，不停的上拉会出现重复提交的情况。

小微 (作者)

可以设置一个变量.
var oploading = false;
function loadMore(){
if(hasMore&&oploading ){
page++;
makehtml();
}

function makehtml(){
oploading = true;

//结束
oploading = false
}

vinck

设置变量也是没用的。没法解决重复提交的问题。

小微 (作者)

我有点没弄懂你什么意思，

不过不管你要干什么，防止重复提交有个最蠢的办法，锁住当前页面
plus.nativeUI.showWaiting();
操作完再关闭

DCloud_UNI_FXY

上拉加载会重复？同一个上拉加载没有end之前，不会再触发上拉加载啊。
你的代码贴一下

1***@163.com

为什么mui 主动触发上拉加载后滑动加载会失效？？

2017-08-21 18:41

vinck

找到原因了，设置了Timeout导致的。

阿逗

mui下拉加载 http://www.sucaihuo.com/php/2520.html

关于上拉加载的奇怪问题

11 个回复

公告

相关问题

关于上拉加载的奇怪问题

与内容相关的链接

11 个回复

公告

相关问题