<!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>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh : {
container:".mui-content",
down : {
height:50,
auto: false,
contentdown : "下拉可以刷新",
contentover : "释放立即刷新",
contentrefresh : "正在刷新...",
callback : rush
}
}
}
);
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>
2 个回复
LLgg
官方的下拉刷新分为3种:
①单webview下拉刷新
②双webview下拉刷新
③div模拟下拉刷新。
你用的的是双webview下拉刷新,但是你在电脑上面测试的时候,也就是没有在html5+的环境下测试的时候,是自动给你替换成了div模拟下拉刷新,所以你在电脑上面可以看到下拉刷新效果,到了打包之后app里面之后,就启用了双webview下拉刷新的模式,但是你没有按照双webview下拉刷新的模板去写,所以在app里面就失效了。
但是可以对你代码稍微修改一下即可,改成双webview下拉刷新规范的代码布局。
双webview下拉刷新分为2个页面,主页面,子页面,
主页面
子页面
这是我的网站,O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
LLgg
mui的下拉刷新使用的是双webview下拉刷新,但是官方的下拉刷新文档说明的不是很清楚,导致用户直接复制子页面的刷新事件去测试,正巧就出现了mui的下拉刷新在浏览器里面可以刷新,但是打包之后就出现异常的情况。