index.html 首页面:
<script>
mui.init({
subpages:[{
url:"list.html",
id:"list",
styles:{
top:"48px",
left:0,
bounce:"vertical"
}
}]
});
</script>
刷新页面的代码list.html :
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
contentdown:"下拉可以刷新",
contentrefresh:'下拉刷新...',
callback: pulldownRefresh
},
container: '#pullrefresh',
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元素
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">列表 ' + (i + 1) + '</a>';
//下拉刷新,新纪录插到最前面;
table.insertBefore(li, table.firstChild);//把刷新出来的元素添加到第一位
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
/** -
上拉加载
*/
var count = 0;
function pullupRefresh() {
console.log("上拉了...........")
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">列表 ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}</script>
2 个回复
wuweitiandian
遇到同样的问题,明明是按照官方的案例去实现的,可是自己的就是不行
wuweitiandian
看到有人说,不如改为点击加载,我觉得虽然治标不治本,但是也是一个挺好的替换方案!