mui上拉加载第一次加载完数据后下拉刷新，然后再上拉就读取不到数据
第二次上拉就读取不到JSON里的数据了 ‘content’--undefined
好了 我直接上代码了；谢谢各路大神解答
HTML：
<!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 rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<!--下拉刷新容器-->
<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 src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
contentdown:'下拉刷新',
contentover:'释放刷新',
contentrefresh:'刷新中...',
callback: pulldownRefresh
},
up: {
contentrefresh: '加载中...',
contentnomore: '哇哦，没有了...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax({
type: 'GET',
url: 'pull.json',
dataType: 'json',
success: function(data) {
var reaut = '';
for(var i = 0; i < 8; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">' + data.lists[i].content + '</a>';
//下拉刷新，新纪录插到最前面；
// table.insertBefore(li, table.firstChild);
reaut += "<li class='mui-table-view-cell'>" +
"<a class='mui-navigate-right'>"+ data.lists[i].content +"</a></li>"
table.innerHTML = reaut;
}
}
});
// 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
mui('#pullrefresh').pullRefresh().refresh(true);
count = 0;
// console.log(count);
}, 1500);
}
var count = 0;
var counter = 0;
// 每页展示4个
var num = 8;
var pageStart = 0,
pageEnd = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
console.log(count);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));//参数为true代表没有更多数据了。
// console.log(count);
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax({
type: 'GET',
url: 'pull.json',
dataType: 'json',
success: function(data) {
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
for(var i = pageStart; i < pageEnd; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">' + data.lists[i].content + '</a>';
table.appendChild(li);
}
}
});
// 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);
// }
}, 1000);
}
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>
JSON:
{
"lists" : [
{
"content":"第一"
},
{
"content":"第二"
},
{
"content":"第三"
},
{
"content":"第四"
},
{
"content":"第五"
},
{
"content":"第六"
},
{
"content":"第七"
},
{
"content":"第八"
},
{
"content":"第九"
},
{
"content":"第十"
},
{
"content":"第十一"
},
{
"content":"第十二"
},
{
"content":"第十三"
},
{
"content":"第十四"
},
{
"content":"第十五"
},
{
"content":"第十六"
},
{
"content":"第十七"
},
{
"content":"第十八"
},
{
"content":"第十九"
},
{
"content":"第二十"
},
{
"content":"第二十一"
},
{
"content":"第二十二"
},
{
"content":"第二十三"
},
{
"content":"第二十四"
}
]
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
人工置顶 。。。。