MUI : 版本号：v1.2.0
android 版本号：4.4.4
在首页 加载2个webview 进来，只有一个有拉动刷新动能（list.html）
以下是list.html的代码 ，（修改mui原项目的）
而且单个打开list.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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<style type="text/css">
html,
body {
background-color: #efeff4;
}
.mui-content {
padding: 0px;
margin-top: 0px;
}
.mui-ellipsis-2{
white-space:normal;
margin-top: 8px;
}
.mui-table-view .mui-media-object {
max-width: 80px;
height: 70px;
line-height: 70px;
}
</style>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="./images/yuantiao.jpg">
<div class="mui-media-body">
静静的看这个世界，最后终于疯了
<p class='mui-ellipsis-2'>静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了静静的看</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script>
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
var list = document.querySelectorAll('.ios-only');
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
}
}
mui.init({
preloadLimit: 5, //同时并存的预加载窗口数量
swipeBack: true,
keyEventBind: {
backbutton: true
},
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var templates = {};
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url: header,
id: name + "-main",
styles: {
popGesture: "hide",
},
extras: {
mType: 'main'
}
});
//预加载共用子webview
var subWebview = mui.preload({
url: !content ? "" : content,
id: name + "-sub",
styles: {
top: '45px',
bottom: '0px',
},
extras: {
mType: 'sub'
}
});
subWebview.addEventListener('loaded', function() {
setTimeout(function() {
subWebview.show();
}, 50);
});
subWebview.hide();
headerWebview.append(subWebview);
//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
headerWebview.addEventListener('hide', function() {
subWebview.hide("none");
});
}
templates[name] = template = {
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
mui.plusReady(function() {
//关闭splash页面；
plus.navigator.closeSplashscreen();
});
//主列表点击事件
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if (type == "common") {
if (~id.indexOf('')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9998,
popGesture: pop
},
waiting: {
autoShow: false
}
});
} else {
mui.openWindow({
id: id,
url: this.href,
waiting: {
autoShow: false
}
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html') ? getTemplate('pullrefresh') : getTemplate('default');
//判断是否显示右上角menu图标；
var showMenu = ~href.indexOf('popovers.html') ? true : false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText.trim();
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', {
title: title,
showMenu: showMenu
});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
} else {
reload = false;
}
} else {
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
}
}
});
var index = null; //主页面
function openMenu() {
!index && (index = mui.currentWebview.parent());
mui.fire(index, "menu:open");
}
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragright', function(e) {
if (!mui.isScrolling) {
e.detail.gesture.preventDefault();
}
});
//监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
window.addEventListener("swiperight", function(e) {
//默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
if (Math.abs(e.detail.angle) < 4) {
openMenu();
}
});
/**
* 下拉刷新具体业务实现
*/
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 href="javascript:;"><img class="mui-media-object mui-pull-left" src="./images/yuantiao.jpg"><div class="mui-media-body">静静的看这个世界，最后终于疯了<p class="mui-ellipsis-2">静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了</p></div></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 + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="./images/yuantiao.jpg"><div class="mui-media-body">静静的看这个世界，最后终于疯了<p class="mui-ellipsis-2">静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了静静的看这个世界，最后终于疯了</p></div></a>';
table.appendChild(li);
}
}, 1500);
}
</script>
</html>
3 个回复
laden666666
我也遇到这个问题 急救
DCloud_UNI_FXY
把你的测试工程发出来，我看看
枫桥居APP
我也发现了,在ios下拉来可以出现加载中的icon,但安卓下木有
2015-04-10 14:10
DCloud_UNI_FXY
安卓的下拉刷新必须是双webview。
参考hello-mui中的template_pullrefresh.html(父webview)和pullrefresh.html(子webview)
laden666666
搞定了 是我以为plusReady执行的时候dom就加载完了，事实上不是这样的，把script放到底下就好使了；或者在$(function(){})里写也好使
2015-04-12 19:35
panpanhtai
回复 laden666666:具体怎么解决的，我的也有这种情况，有时正常，不正常后得得加载
2015-12-11 09:45