d***@163.com
d***@163.com
  • 发布:2017-06-08 11:45
  • 更新:2017-06-08 16:03
  • 阅读:3481

mui下拉刷新 pullRefresh 在手机app里面不能没拖动效果,是什么原因啊。

分类:MUI

写了个简单demo,我照这mui>examples>pullrefresh_sub.html写的,谷歌浏览器,手机浏览器都可以。真机运行就一动不动了,拖不动,有没遇到同样问题的。或者高手大神解答下。急要啊
<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <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.css" rel="stylesheet" />  
</head>  

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

    <script src="../../js/lib/mui.js"></script>  
    <script type="text/javascript">  
        mui.init({  
            pullRefresh: {  
                container: '#refreshContainer',  
                down: {  
                    callback: function() {  
                        alert(1)  

                        setTimeout(function() {  
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);  
                        }, 1500)  
                    }  
                }  
            }  

        });  
    </script>  
</body>  

</html>

2017-06-08 11:45 负责人:无 分享
已邀请:
tyro

tyro - 前端开发tyro

父容器
mui.init({
subpages:[{ //加载子页面
url:'application_knowledge_fuze_list.html',
id:'application_knowledge_fuze_list',
styles:{
top: '45px',
bottom: '0px',
}
}]
});

子容器(上拉 下拉页)
<body class="mui-ios mui-ios-9 mui-ios-9-1">
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content-padded">
<div id="queryInput" class="mui-text-center">
<span class="mui-icon mui-icon-search"></span>查询
</div>
</div>
<!--数据列表-->
<ul id="workLogList" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div style="display: flex;align-items: center;">
<span class="mui-icon mui-icon-image" style="margin-right: 10px;font-size: 180%;"></span>
<div style="display: flex;flex-direction: column;">
<span>IMG_3947.JPG</span>
<span style="color: #929292;font-size: 80%;">曹聪 479.4kb 11:30</span>
</div>
</div>
</li>
</ul>
</div>
</div>

mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});

  • d***@163.com (作者)

    谢谢您的回答,用您的方法做出来了。但是出现了个新问题,浏览器是可以运行的。但是真机运行,子页面加载失败了。一个空白页

    2017-06-09 09:01

  • tyro

    检查下路径 这种方法我写了n个项目了,打包之后都没问题,更不用说 真机运行了

    2017-06-21 15:46

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