mui上拉加载第一次加载完数据后下拉刷新,然后再上拉就读取不到数据

吃葡萄不吐番茄皮
  • 1.7k

第二次上拉就读取不到JSON里的数据了 ‘content’--undefined
好了 我直接上代码了;谢谢各路大神解答
HTML:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="css/mui.min.css">
    </head>

    <body>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul class="mui-table-view mui-table-view-chevron">

                </ul>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script>
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        contentdown:'下拉刷新',
                        contentover:'释放刷新',
                        contentrefresh:'刷新中...',
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '加载中...',
                        contentnomore: '哇哦,没有了...',
                        callback: pullupRefresh
                    }
                }
            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {

                setTimeout(function() {
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    mui.ajax({
                        type: 'GET',
                        url: 'pull.json',
                        dataType: 'json',
                        success: function(data) {
                            var reaut = '';
                            for(var i = 0; i < 8; i++) {
                                var li = document.createElement('li');
                                li.className = 'mui-table-view-cell';
                                li.innerHTML = '<a class="mui-navigate-right">' + data.lists[i].content + '</a>';
                                //下拉刷新,新纪录插到最前面;
//                                table.insertBefore(li, table.firstChild);
                                reaut += "<li class='mui-table-view-cell'>" +
                                        "<a class='mui-navigate-right'>"+ data.lists[i].content +"</a></li>"
                                table.innerHTML = reaut;
                            }
                        }
                    });
                    //                    for (var i = cells.length, len = i + 3; i < len; i++) {
                    //                        var li = document.createElement('li');
                    //                        li.className = 'mui-table-view-cell';
                    //                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                    //                        //下拉刷新,新纪录插到最前面;
                    //                        table.insertBefore(li, table.firstChild);
                    //                    }
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    mui('#pullrefresh').pullRefresh().refresh(true);
                    count = 0;                    
                    
//                    console.log(count);
                }, 1500);
            }
            var count = 0;
            var counter = 0; 
            // 每页展示4个
            var num = 8;
            var pageStart = 0,
                pageEnd = 0;
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() { 
                setTimeout(function() {
                    console.log(count);
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));//参数为true代表没有更多数据了。
//                    console.log(count);
                    
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');

                    mui.ajax({
                        type: 'GET',
                        url: 'pull.json',
                        dataType: 'json',
                        success: function(data) {
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;
                            for(var i = pageStart; i < pageEnd; i++) {
                                var li = document.createElement('li');
                                li.className = 'mui-table-view-cell';
                                li.innerHTML = '<a class="mui-navigate-right">' + data.lists[i].content + '</a>';
                                table.appendChild(li); 
                            }
                        }
                    });
                    //                    for(var i = cells.length, len = i + 20; i < len; i++) {
                    //                        var li = document.createElement('li');
                    //                        li.className = 'mui-table-view-cell';
                    //                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                    //                        table.appendChild(li);
                    //                    }
                }, 1000);
            }
            if(mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    }, 1000);

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

</html>

JSON:

{
    "lists" : [
        {
            "content":"第一"
        },
        {
            "content":"第二"
        },
        {
            "content":"第三"
        },
        {
            "content":"第四"
        },
        {
            "content":"第五"
        },
        {
            "content":"第六"
        },
        {
            "content":"第七"
        },
        {
            "content":"第八"
        },
        {
            "content":"第九"
        },
        {
            "content":"第十"
        },
        {
            "content":"第十一"
        },
        {
            "content":"第十二"
        },
        {
            "content":"第十三"
        },
        {
            "content":"第十四"
        },
        {
            "content":"第十五"
        },
        {
            "content":"第十六"
        },
        {
            "content":"第十七"
        },
        {
            "content":"第十八"
        },
        {
            "content":"第十九"
        },
        {
            "content":"第二十"
        },
        {
            "content":"第二十一"
        },
        {
            "content":"第二十二"
        },
        {
            "content":"第二十三"
        },
        {
            "content":"第二十四"
        }
    ]    
}
回复
阅读 5.4k
1 个回答

人工置顶 。。。。

你知道吗?

宣传栏