maijiam
maijiam
  • 发布:2015-01-27 11:48
  • 更新:2015-01-27 15:01
  • 阅读:2765

根据Hello MUI例子中做的获取数据 下拉、上拉刷新显示,怎么延迟将近10S才显示数据呢?

分类:MUI

根据Hello MUI例子中做的获取数据 下拉、上拉刷新显示,怎么延迟将近10S才显示数据呢?

下拉、上拉刷新 功能显示正常,就是加载完成后 要将近10秒 数据才显示出来

先谢谢了。

代码如下:

<body>  
            <!--<ul class="mui-table-view" id="Name">  

            </ul>-->  
            <!--下拉刷新容器-->  
            <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>  
            mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        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('http://www.meck.cn/api/api.php?',{  
                        data:{  
                            method:"allUsers",  
                        },  
                        dataType:'json',//服务器返回json格式数据  
                        type:'post',//HTTP请求类型  
                        timeout:0,//超时时间设置为10秒;  
                        success:function(data){                           
                            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">' + data[i+1].title + '</a>';  
                                //下拉刷新,新纪录插到最前面;  
                                table.insertBefore(li, table.firstChild);  
                            }  
                        },  
                        error:function(xhr,type,errorThrown){  
                            //异常处理;  
                            console.log(type);  
                        }  
                    });  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */           
            function pullupRefresh() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    mui.ajax('http://www.meck.cn/api/api.php?',{  
                        data:{  
                            method:"allUsers",  
                        },  
                        dataType:'json',//服务器返回json格式数据  
                        type:'post',//HTTP请求类型  
                        timeout:10000,//超时时间设置为10秒;  
                        success:function(data){                           
                            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">' + data[i+1].title + '</a>';  
                                table.appendChild(li);                            
                            }  
                        },  
                        error:function(xhr,type,errorThrown){  
                            //异常处理;  
                            console.log(type);  
                        }  
                    });  
                }, 1500);  
            }  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }

2015-01-27 11:48 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

pulldownRefresh和pullupRefresh均不需要setTimeout,hello mui只是为了演示动画,才加的;你是通过ajax真实获取服务器数据,因此无需timeout

DCloud_UNI_CHB

DCloud_UNI_CHB

pulldownRefresh和pullupRefresh均不需要setTimeout,hello mui只是为了演示动画,才加的;你是通过ajax真实获取服务器数据,因此无需timeout

maijiam

maijiam (作者) - 必库

去掉 setTimeout 还是一样啊

  • DCloud_UNI_CHB

    那就检查一下你的服务器返回数据时间,是不是网络延迟比较严重。简单验证办法:使用jquery的ajax方法获取数据,然后通过手机浏览器测试,看响应时间有多长

    2015-01-27 11:56

  • maijiam (作者)

    好的,谢谢

    2015-01-27 12:05

maijiam

maijiam (作者) - 必库

最后正确的代码

<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>  
            mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        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('http://www.meck.cn/api/api.php?',{  
                    data:{  
                        method:"allUsers",  
                    },  
                    dataType:'json',//服务器返回json格式数据  
                    type:'post',//HTTP请求类型  
                    timeout:10000,//超时时间设置为10秒;  
                    success:function(data){                           
                        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">' + data[i+1].title + '</a>';  
                            //下拉刷新,新纪录插到最前面;  
                            table.insertBefore(li, table.firstChild);  
                        }  
                    },  
                    error:function(xhr,type,errorThrown){  
                        //异常处理;  
                        console.log(type);  
                    }  
                });  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */           
            function pullupRefresh() {                
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                mui.ajax('http://www.meck.cn/api/api.php?',{  
                    data:{  
                        method:"allUsers",  
                    },  
                    dataType:'json',//服务器返回json格式数据  
                    type:'post',//HTTP请求类型  
                    timeout:10000,//超时时间设置为10秒;  
                    success:function(data){                           
                        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">' + data[i+1].title + '</a>';  
                            table.appendChild(li);                            
                        }  
                    },  
                    error:function(xhr,type,errorThrown){  
                        //异常处理;  
                        console.log(type);  
                    }  
                });  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
            }     
            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
            /**  
             * 下拉刷新具体业务实现 结束  
             */           
        </script>
  • DCloud_UNI_CHB

    现在时间缩短了是吗?问题出在哪里了?

    2015-01-28 10:44

  • maijiam (作者)

    在加载数据库的时候,一次性加载的数据太多了,最后把$sql_articles=mysql_query("Select * FROM aws_article") or DIE (mysql_error()); 改为 $sql_articles=mysql_query("Select id,title FROM aws_article") or DIE (mysql_error()); 就正常了

    2015-01-30 13:28

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