芭蕉雨
芭蕉雨
  • 发布:2017-06-23 11:03
  • 更新:2017-06-26 17:07
  • 阅读:2519

为什么下拉刷新没有反应啊???????????

分类:MUI

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 id="title" class="mui-title">分页</h1>  
    </header>  

    <div class="mui-content mui-scroll-wrapper" id="pagena">  
        <div class="mui-scroll">  
            <ul class="mui-table-view mui-table-view-chevron"  id="listo">  

            </ul>  
        </div>  
    </div>  
    <script src="../js/mui.min.js"></script>  
    <script type="text/javascript">  
        var page=1;  

            mui.get(  
                        'http://192.168.1.25:81/mysite/supply.php',  
                        {act:'list',  
                          page:page  
                        },  
                        function(result){  
                            var str='';  
                            mui.each(result['data'],function(index,items){  

                                str +='<li class="mui-table-view-cell mui-control-item">'+items.sortname+'</li>';  
                            });  
                            document.getElementById('listo').innerHTML=str;  

                        },  
                        'json'  
                       );  

        mui.init({  
            swipeBack: true,  
            pullRefresh: {  
                container: '#pagena',  
                down: {  
                    style: 'circle',  
                    color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色  
                     height:50,//可选,默认50.触发下拉刷新拖动距离,  
                    offset: '0px',  

// auto: true,
callback:pulldownRefresh
}
}

        });  
function pulldownRefresh() {  
            setTimeout(function() {  
                       if(page>3){  
                            page==1;  
                        }  
                        ++page;  

                        mui.get(  
                        'http://192.168.1.25:81/mysite/supply.php',  
                        {act:'list',  
                          page:page  
                        },  
                        function(result){  
                            var str='';  
                            mui.each(result.data,function(index,items){  
                                str +='<li class="mui-table-view-cell mui-control-item">'+items.sortname+'</li>';  
                            });  
                            document.getElementById('listo').innerHTML=str;  

                        },  
                        'json'  
                       );  
                       mui('#pagena').pullRefresh().endPulldownToRefresh();  

// mui('#pagena').pullRefresh().endPulldown();

                       }, 1500);  
                    }  
    </script>  
</body>  

</html>

2017-06-23 11:03 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

参考mui下拉刷新文档,和hello mui中下拉刷新的示例,还不行的话,把demo上传一下,你的代码复制粘贴看的太费劲了。

  • 芭蕉雨 (作者)

    我看了mui下拉刷新文档,修改了一下,只能在浏览器中显示效果,Android手机上没有反应,这个是我修改后的代码

    <body>

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

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

    <h1 id="title" class="mui-title">分页</h1>

    </header>


        <div class="mui-content mui-scroll-wrapper" id="pagena">  
    <div class="mui-scroll">
    <ul class="mui-table-view mui-table-view-chevron" id="listo">

    </ul>
    </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
    var page=1;

    mui.get(
    'http://192.168.1.25:81/mysite/supply.php',
    {act:'list',
    page:page
    },
    function(result){
    var str='';
    mui.each(result['data'],function(index,items){

    str +='<li class="mui-table-view-cell mui-control-item">'+items.sortname+'</li>';
    });
    document.getElementById('listo').innerHTML=str;

    },
    'json'
    );

    mui.init({
    swipeBack: true,
    pullRefresh: {
    container: '#pagena',
    down: {
    style: 'circle',
    color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
    height:50,//可选,默认50.触发下拉刷新拖动距离,
    offset: '0px',

    // auto: true,

    callback:pulldownRefresh

    }

    }


            });  
    function pulldownRefresh() {
    setTimeout(function() {
    if(page>3){
    page==1;
    }
    ++page;

    mui.get(
    'http://192.168.1.25:81/mysite/supply.php',
    {act:'list',
    page:page
    },
    function(result){
    var str='';
    mui.each(result.data,function(index,items){
    str +='<li class="mui-table-view-cell mui-control-item">'+items.sortname+'</li>';
    });
    document.getElementById('listo').innerHTML=str;

    },
    'json'
    );
    mui('#pagena').pullRefresh().endPulldownToRefresh();

    // mui('#pagena').pullRefresh().endPulldown();


                           }, 1500);  
    }
    </script>
    </body>

    2017-06-24 08:58

Neil_HL

Neil_HL

你使用的是双webview的下拉刷新,但你只有一个webview,怎么会起作用呢?示例里的header是另一个webview,不是你自己写的header标签,你将这个页面当成另一个webview的子webview,再在手机上尝试,应该能成功,具体参考mui示例里的pullrefresh_main.html文件,或者参考http://dev.dcloud.net.cn/mui/pulldown/#doubleWVpull

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