上拉加载有BUG，“加载更多”会插入在内容里面

分类：MUI

我项目里面不需要下拉更新，只要上拉加载，所以我在init里面删除掉down:{xxxxxxx}只保留up:{xxxx},并且删去pulldownRefresh函数，结果成这样了

还有哦，就是我把它放手机里面运行，还不能向上滑动看下面的内容，一滑动就触发上拉加载了

2014-12-07 00:40 负责人:无分享

1 个回复

DCloud_UNI_CHB

你的mui版本是多少？
我这边没重现你的问题，你可以在hello mui示例中修改代码尝试一下，看是否存在同样的问题。

Oscar

我这也有这个问题，把上拉加载和indexedList组合到一块，只要上拉就会触发上拉加载的回调函数

2015-08-24 08:14
houfeng2016

回复 Oscar: 能否描述再详细一些，能否提供一个测试代码，我帮你查一下。

2015-08-24 11:48

Oscar

回复 houfeng2016:

这个是类似的例子,原例中是用了子页面，现在整合到一个中了。父子放到一块，上拉到底部再触发上拉加载，以及双击头部回到顶部都没问题。但再把搜索机场那个一整合到一块就不行了，这两个问题都出来了。

<!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>XXX</title>  

    <link href="../../css/mui.min.css" rel="stylesheet" />  

    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>  

    <link href="../../css/mui.indexedlist.css" rel="stylesheet" />  

    <script src="../../js/mui.min.js"></script>  

    <script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>  

    <script src="../../js/mui.zbkbIndexedlist.js"></script><!--机场js-->  

    <style>  

        /*满屏*/  

        html,  

        body {  

            height: 100%;  

            overflow: hidden;  

        }  

        /*.mui-bar {  

            -webkit-box-shadow: none;  

            box-shadow: none;  

        }*/  



        /*初始搜索框隐藏*/  

        #searchDiv {  

            display: none;  

        }  



        .kbsj-align {  

            position: relative;  

            top: 23px;  

        }  

        div h4 {  

            padding-top: 1px;  

            font-weight: normal;  

        }  

        .mui-indexed-list-empty-alert {  

            margin-left: 25px;  

        }  

    </style>  

</head>  



<body>  

    <header class="mui-bar mui-bar-nav">  

        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  

        <a id="search" class="mui-icon mui-icon-search mui-pull-right" style="color: #999;" onclick="searchInput();"></a>  

        <h1 class="mui-title">XXX</h1>  

    </header>  

    <div class="mui-content">  

        <div id='list'>  

            <div id="searchDiv" class="mui-indexed-list-search mui-input-row mui-search">  

                <input type="search" id="searchInput" class="mui-input-clear mui-indexed-list-search-input" placeholder="">  

            </div>  



            <div class="mui-indexed-list-alert"></div>  

            <div class="mui-indexed-list-inner" id="pullrefresh">  

                <div class="mui-indexed-list-empty-alert">没有数据</div>  

                <ul class="mui-table-view mui-table-view-chevron" id="zbkbList" onclick="viewDetail(event);">  



                </ul>  

            </div>  

        </div>  

    </div>  

    <script type="text/javascript" charset="utf-8">  

        var urls = "/android/zbkbApplAction!list.action",// 获取值班快报列表的url  

            theHeight,// 全局设置列表的高度  

            isError = false,// ajax请求是否发生异常  

            isEnd = false;// 数据是否已加载完成  

        //初始化  

        mui.init({  

            //设置上拉加载  

            gestureConfig:{  

                doubletap:true// 允许双击事件  

            },  

            pullRefresh: {  

                container: '#pullrefresh',//指定加载区域  

                up: {  

                    contentrefresh: '正在加载...',  

                    callback: pullupRefresh//上拉执行的回调函数  

                }  

            }  

        });  



        //mui加载成功后执行的内容  

        mui.ready(function() {  

            //初始设定屏幕高度，使得可以翻屏  

            var header = document.querySelector('header.mui-bar');  

            var list = document.getElementById('list');  

            //calc hieght  

            theHeight = document.body.offsetHeight - header.offsetHeight;  

            list.style.height = theHeight + 'px';  

        });  



        //获取新数据  

        function initData() {  

            //加载新数据  

            hasNext = getData();  

            //加载数据时，需要根据输入框的值进行过滤  

            indexedList = new mui.IndexedList(list);  

            var textValue = eval(inputElement).value;//input框的值  

            indexedList.search(textValue);  

            return hasNext;  

        }  



        //双击header回到顶部，这块现在有bug  

        var contentWebview = null;  

        document.querySelector('header').addEventListener('doubletap',function () {  

            if(contentWebview==null){  

                contentWebview = plus.webview.currentWebview();  

            }  



            if(mui.os.ios){  

                contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");  

            }else{  

                contentWebview.evalJS('mui.scrollTo(0, 100)');  

                //mui.scrollTo(0, 100);  

            }  

        });  



        /**  

         * 上拉加载具体业务实现  

         */  

        function pullupRefresh() {  

            // 当发生错误，并且还有新数据时  

            if (isError && !isEnd) {  

                // 重新显示成正在加载字样  

                var refresh = document.getElementsByClassName("mui-pull-caption-refresh")[0];  

                refresh.parentNode.innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner mui-visibility"></div>'+  

                                               '<div class="mui-pull-caption mui-pull-caption-refresh">正在加载...</div>';  

            }  

            setTimeout(function() {  

                hasNext = initData();  

                mui('#pullrefresh').pullRefresh().endPullupToRefresh(!hasNext); //参数为true代表没有更多数据了。  

                if (isEnd) {// 数据已加载完成时  

                    var refresh = document.getElementsByClassName("mui-pull-caption-refresh")[0];  

                    if (refresh && refresh.parentNode) {  

                        refresh.parentNode.innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>'+  

                                                   '<div class="mui-pull-caption mui-pull-caption-refresh">没有更多数据了</div>';  

                    }  

                } else {// 还有更多数据时  

                    var refresh = document.getElementsByClassName("mui-pull-caption-refresh")[0];  

                    if (refresh && refresh.parentNode) {  

                        refresh.parentNode.innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>'+  

                                                   '<div class="mui-pull-caption mui-pull-caption-refresh">上拉显示更多</div>';  

                    }  

                }  

            }, 1500);  

        }  



        /**  

         * 初始加载数据  

         */  

        if (mui.os.plus) {  

            mui.plusReady(function() {  

                setTimeout(function() {  

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

                }, 1000);  



            });  

        } else {  

            mui.ready(function() {  

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

            });  

        }  



        //定义的元素变量  

        var inputDiv = document.getElementById("searchDiv"),  

            inputElement = document.getElementById("searchInput");  



        //数据请求参数  

        var start = 1,//默认搜索第1页  

            limit = 10,//默认搜索20条  

            hasNext = true;//是否有下一页，默认为有  



        //input框失去焦点时触发  

        inputElement.addEventListener('blur', hideInput, false);  



        //得到焦点时显示input框，并获得焦点  

        function searchInput() {  

            inputDiv.style.display = "inline";  

            inputElement.focus();  

        }  



        //失去焦点时触发  

        function hideInput () {  

            var textValue = eval(inputElement).value;//input框的值  

            if (!textValue) {//当没有内容时，input框隐藏  

                inputDiv.style.display = "none";   

            }  

        }  



        //执行查看操作  

        function viewDetail (e) {  

            var target = e.target;  

            var id = getCloset(target);  

            if (id) {  

                mui.openWindow({//采用此方式打开窗口，重新刷新列表页面  

                    url:"zbkbView.html?id="+id  

                });  

            }  

        }  



        //获取当前元素最近上级的li元素的id属性，相当于jQuery的closet  

        function getCloset (target) {  

            var temp = target;  

            var count = 0;  

            while (temp.nodeName.toLowerCase() != 'li' && count <= 3){  

                temp = temp.parentNode;  

                count++;  

            }  



            if (temp.nodeName.toLowerCase() == 'li') {  

                return temp.getAttribute("id");  

            } else {  

                return '';  

            }  

        }  



        //获取数据及分页  

        function getData() {  

            var user = app.getUser(),  

                token = user.token;  

            var name = eval(inputElement).value;  



            app.ajax(urls,{  

                data:{  

                    token:token,  

                    start:start,  

                    limit: limit  

                },  

                async:false,  

                dataType:'json',//服务器返回json格式数据  

                type:'post',//HTTP请求类型  

                success:function(data){  

                    if (data.result == "success") {  

                        dataArray = data.data;  

                        hasNext = data.hasNext;  



                        if (!hasNext) {  

                            isEnd = true;  

                        }  



                        var length = dataArray.length,  

                            zbUl = document.getElementById("zbkbList"),  

                            zbkb = zbUl.innerHTML;  

                        //动态生成列表  

                        for (var i = 0; i < length; i++) {  

                            var zbsj = dataArray[i].zbsj,  

                                id = dataArray[i].id,  

                                zbbt = dataArray[i].zbbt,  

                                zbdw = dataArray[i].zbdw;  

                            zbkb = zbkb + '<li class="mui-table-view-cell" id="'+id+'">'+  

                                                '<div class="mui-table">'+  

                                                    '<div class="mui-table-cell mui-col-xs-10">'+  

                                                        '<h4 class="mui-ellipsis">'+zbbt+'</h4>'+  

                                                        '<p class="mui-h6 mui-ellipsis">'+zbdw+'</p>'+  

                                                    '</div>'+  

                                                    '<div class="mui-table-cell mui-col-xs-4 mui-text-right">'+  

                                                        '<span class="mui-h6 kbsj-align">'+zbsj+'</span>'+  

                                                    '</div></div></li>';  

                        }  

                        zbUl.innerHTML = zbkb;//添加到dom中  

                    }  

                },  

                error: function (xhr, type, errorThrown) {  

                    isError = true;  

                    var refresh = document.getElementsByClassName("mui-pull-caption-refresh")[0];  

                    if (refresh && refresh.parentNode) {  

                        refresh.parentNode.innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>'+  

                                                   '<div class="mui-pull-caption mui-pull-caption-refresh">加载数据失败</div>';  

                    }  

                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(isEnd);  

                }  

            });  

            start++;  

            return hasNext;  

        }  



    </script>  

</body>

</html>

2015-09-01 08:34

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

上拉加载有BUG，“加载更多”会插入在内容里面

1 个回复

公告

相关问题

上拉加载有BUG，“加载更多”会插入在内容里面

与内容相关的链接

1 个回复

公告

相关问题