详细问题描述
[内容]直接把官网的列表“下拉刷新”，上拉“加载更多”的列子拿来真机上运行时，下拉没有效果，都不执行代码。但是在微信，浏览器等都没有问题！
重现步骤
[步骤]复制官网的 pullrefresh_sub.html 文件，修改引用文件的引用路径，然后在真机上运行
[结果]下拉加载的事件没有触发
[期望] 希望能尽快查明原因
运行环境 红米NOET2 小米4S 魅族3s
[系统版本] 最新的MIUI
[浏览器版本] 浏览器端都没有问题
[IDE版本] 最新版本
[mui版本] 最新版本
附件
[代码片段]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 5</a>
</li>
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
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');
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">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
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');
for (var i = cells.length, len = i + 5; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1500);
} // if (mui.os.plus) {
// mui.plusReady(function() {
// setTimeout(function() {
// mui('#pullrefresh').pullRefresh().pullupLoading();
// }, 10);
//
// });
// } else {
// mui.ready(function() {
// mui('#pullrefresh').pullRefresh().pullupLoading();
// });
// }
</script>
</body>
</html>
[安装包]
联系方式
[QQ] 181331251@qq.com
[电话] 18650718184
3 个回复
LLgg
官方的下拉刷新分为3种：
①单webview下拉刷新
②双webview下拉刷新
③div模拟下拉刷新。
你用的的是双webview下拉刷新，但是你在微信，浏览器上面测试的时候，也就是没有在html5+的环境下测试的时候，是自动给你替换成了div模拟下拉刷新，所以你在微信，浏览器上面可以看到下拉刷新效果，到了打包之后app里面之后，就启用了双webview下拉刷新的模式，但是你没有按照双webview下拉刷新的模板去写，所以在app里面就失效了。
如果需要使用双窗口下拉，应该同时把官方案例里面的pullrefresh_main.html作为主页面，pullrefresh_sub.html作为子页面，一起使用。才能下拉刷新。
这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
LLgg
mui的下拉刷新使用的是双webview下拉刷新，但是官方的下拉刷新文档说明的不是很清楚，导致用户直接复制子页面的刷新事件去测试，正巧就出现了mui的下拉刷新在浏览器里面可以刷新，但是打包之后就出现异常的情况。
这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
t***@163.com - 80后
官方的实例真垃圾！我的也是不刷新！