上拉加载在iOS上出现问题

分类：MUI

iOS 上拉加载 mui

上拉加载和下拉刷新再android手机上没问题。在iOS上，下拉刷新没问题，但是上拉加载总是在最上面，当上拉时，可以调用上拉加载，并显示“正在加载...”、“没有更多数据了”，但是只可以看到最上面几条数据，整个div一共有几十条，根本就拖不上去（拖动时右侧有滚动条）。在android手机上没问题。


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

        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content">  

            <ul id="grid" class="grid effect-1">  
            <li class="img">  
                <a href="imageviewer.html" open-type="image" isvip="false" style="position: relative;">  
                    <img src="http://p0.so.qhimg.com/bdr/326__/t01b7cb69538f21f11f.jpg">  
                    <img src="images/vipicon.png" style="position: absolute;right: 0;top: 0;width: 30px;height: 30px;"/>  
                    <img src="images/videoicon.png" style="position: absolute;margin-left: 2px;top: 2px;width: 24px;height: 24px;" />  
                </a>  
            </li>  
        </ul>  
        </div>  
    </body>  

    <script>  
            mui.init({  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  

                        contentrefresh: '正在加载...',  
                        callback: pullupRefresh  
                    }  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                setTimeout(function() {  
                    var table = document.body.querySelector('.grid');  
                    var cells = document.body.querySelectorAll('.img');  
                    for (var i = cells.length, len = i + 3; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'img';  
                        li.innerHTML = '<a href="#fLBG"><img src="http://p4.so.qhimg.com/bdr/326__/t01b24f92d49745f4c9.jpg"></a>';  
                        //下拉刷新，新纪录插到最前面；  
                        table.insertBefore(li, table.firstChild);  
                    }  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                    new AnimOnScroll(document.getElementById('grid'), {  
                minDuration: 0.4,  
                maxDuration: 0.7,  
                viewportFactor: 0.2  
            });  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
//              alert("上拉加载！！！");  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.grid');  
                    var cells = document.body.querySelectorAll('.img');  
                    alert("cells count:"+cells.length);  
                    for (var i = cells.length, len = i + 20; i < len; i++) {  
                        var linote = document.createElement('li');  
                        linote.innerHTML = '<a href="#fLBG"><img src="http://p4.so.qhimg.com/bdr/326__/t01b24f92d49745f4c9.jpg"></a>';  
                        table.appendChild(linote);  

                    }  
                    new AnimOnScroll(document.getElementById('grid'), {  
                minDuration: 0.4,  
                maxDuration: 0.7,  
                viewportFactor: 0.2  
            });  
                }, 1500);  
            }  
            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>

2016-07-01 10:21 负责人:无分享