文件结构:
index.html
list.html
index.html加载list.html作为子页面
然后list.html做上拉下拉,真机运行,子页面向下拉拉不动,向上正常
然后随便修改下list.html 保存后,自动同步真机运行,发现下拉可以用了,第一次加载不能用
这是为什么吗,是因为webview加载问题吗?
index.html
<header class="mui-bar mui-bar-nav navbar">
<a id="menu-btn" class="index_nav mui-pull-left" href="javascript:;">筛选</a>
<a id="info" href="javascript:;" class="index_nav mui-pull-right" href="javascript:;">提问</a>
<h1 class="mui-title">全部</h1>
</header>
<div class="mui-content">
</div>
<script>
var menu = null,list=null,main=null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground:'#f7f7f7',
subpages: [{
id: 'list',
url: 'list.html',
styles: {
top: '48px',
bottom: 0,
bounce: 'vertical'
}
}]
});
</script>
//list.html 代码
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script>
mui.init({
swipeBack: false,
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 + 20; 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();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
2 个回复
灯
我遇到和你一样的情况,延时500毫秒执行子界面的mui.init方法
DCloud_UNI_CHB
看一下mui版本号,另外参考hello mui中的示例,可能部分代码细节有问题;
y7 (作者)
已经解决了,延时500毫秒可以
2015-01-14 17:53
DCloud_UNI_CHB
回复 y7:主页面中延时500毫秒,执行mui.init()方法吗?
2015-01-14 18:03
y7 (作者)
对,延迟了1000毫秒,500毫秒有时候还是有这个问题
2015-01-14 18:12
DCloud_UNI_CHB
回复 y7:你具体手机型号是多少?我将如上代码完整拷贝,并作为首页运行,下拉刷新没问题;
2015-01-14 21:39
y7 (作者)
红米NOTE
2015-01-14 23:53
roshan
小米3同样会出现此问题
2015-01-16 15:40