真机运行可以下拉刷新，打包APP运行却刷新不了代码如下，哪位大神帮看看

分类：MUI

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单新元素</title>
<link href="css/mui.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 class="mui-title">商品详情</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>

<div class="mui-content mui-scroll-wrapper">  
    <ul class="mui-table-view mui-scroll">  
        <li class="mui-table-view-cell">Item 1</li>  
        <li class="mui-table-view-cell">Item 2</li>  
        <li class="mui-table-view-cell">Item 3</li>  
        <li class="mui-table-view-cell">Item 4</li>  
        <li class="mui-table-view-cell">Item 5</li>  
    </ul>  
</div>

);  
function rush(){

// mui.toast("刷新");
var n = mui("li").length;
mui.toast("显示共有"+(n+5)+"件商品");
for(var i=n+1;i<n+6;i++){
var newli = document.createElement("li");
newli.innerHTML="Item "+i;
newli.className="mui-table-view-cell";
var ul = document.getElementsByClassName("mui-table-view")[0];
ul.appendChild(newli);
}
mui('.mui-content').pullRefresh().endPulldownToRefresh();
}

</script>
</body>
</html>

2017-05-15 10:31 负责人:无分享

2 个回复

LLgg

官方的下拉刷新分为3种：
①单webview下拉刷新
②双webview下拉刷新
③div模拟下拉刷新。

你用的的是双webview下拉刷新，但是你在电脑上面测试的时候，也就是没有在html5+的环境下测试的时候，是自动给你替换成了div模拟下拉刷新，所以你在电脑上面可以看到下拉刷新效果，到了打包之后app里面之后，就启用了双webview下拉刷新的模式，但是你没有按照双webview下拉刷新的模板去写，所以在app里面就失效了。

但是可以对你代码稍微修改一下即可，改成双webview下拉刷新规范的代码布局。

双webview下拉刷新分为2个页面，主页面，子页面，

主页面

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>主页面</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <link rel="stylesheet" href="css/mui.min.css">  
    </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 class="mui-title">商品详情</h1>  
</header>  
<div class="mui-content"></div>  
<nav class="mui-bar mui-bar-tab">  
<a class="mui-tab-item mui-active">  
<span class="mui-icon mui-icon-home"></span>  
<span class="mui-tab-label">首页</span>  
</a>  
<a class="mui-tab-item">  
<span class="mui-icon mui-icon-phone"></span>  
<span class="mui-tab-label">电话</span>  
</a>  
<a class="mui-tab-item">  
<span class="mui-icon mui-icon-email"></span>  
<span class="mui-tab-label">邮件</span>  
</a>  
<a class="mui-tab-item">  
<span class="mui-icon mui-icon-gear"></span>  
<span class="mui-tab-label">设置</span>  
</a>  
</nav>  

    </body>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript">  
        mui.init({  
            subpages:[{          //调用子页面刷新的代码  
                url:'子页面地址',   //子页面的地址  
                id:'子页面id',     //子页面的id，可以自己根据需求随便设置  
                styles:{  
                    top: '45px',            //子页面距离顶部的距离  
                    bottom: '45px',         //子页面距离底部的距离  
                }  
            }]  
        });  
    </script>  

</html>

子页面

<!DOCTYPE html>  
<html>  
<head >  
<meta charset="UTF-8">  
<title>子页面</title>  
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
<link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  
<!--下拉刷新容器-->  
<div class="mui-content mui-scroll-wrapper">  
<ul class="mui-table-view mui-scroll">  
<li class="mui-table-view-cell">Item 1</li>  
<li class="mui-table-view-cell">Item 2</li>  
<li class="mui-table-view-cell">Item 3</li>  
<li class="mui-table-view-cell">Item 4</li>  
<li class="mui-table-view-cell">Item 5</li>  
</ui>  
</div>  

<script src="js/mui.min.js"></script>  
<script>  
    mui.init({  
  pullRefresh : {  
    container:".mui-content",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等  
    down : {  
      height:50,//可选,默认50.触发下拉刷新拖动距离,  
      auto: false,//可选,默认false.自动下拉刷新一次  
      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
      callback :rush //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
    }  
  }  
});  

function rush(){  
// mui.toast("刷新");  
var n = mui("li").length;  
mui.toast("显示共有"+(n+5)+"件商品");  
for(var i=n+1;i<n+6;i++){  
var newli = document.createElement("li");  
newli.innerHTML="Item "+i;  
newli.className="mui-table-view-cell";  
var ul = document.getElementsByClassName("mui-table-view")[0];  
ul.appendChild(newli);  
}  
mui('.mui-content').pullRefresh().endPulldownToRefresh();  
}  

</script>  
</body>  
</html>

这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb

LLgg

mui的下拉刷新使用的是双webview下拉刷新，但是官方的下拉刷新文档说明的不是很清楚，导致用户直接复制子页面的刷新事件去测试，正巧就出现了mui的下拉刷新在浏览器里面可以刷新，但是打包之后就出现异常的情况。

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

真机运行可以下拉刷新，打包APP运行却刷新不了代码如下，哪位大神帮看看

2 个回复

公告

相关问题

真机运行可以下拉刷新，打包APP运行却刷新不了 代码如下，哪位大神帮看看

与内容相关的链接

2 个回复

公告

相关问题

真机运行可以下拉刷新，打包APP运行却刷新不了代码如下，哪位大神帮看看