39,084
社区成员
发帖
与我相关
我的任务
分享用html5页面引入了一个jquery插件，实现平板上的向上滑动加载更多的功能，当页面中有两个容器需要实现这个功能时就出问题了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>订单</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style type="text/css">
</style>
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
loadingMessageTextVisible = true;
showPageLoadingMsg("a", "加载中..." );
pageLoadErrorMessage:'努力加载中。。。'
});
});
</script>
<script type="text/javascript" src="libs/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="libs/iscroll.js"></script>
</script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () {
var content = "";
for (var i=0;i<3;i++){
content = content + "<li>";
content = content + "<a data-ajax='false' href='order_detail.html'>";
content = content + "<span>桌号：20</span>";
content = content + "<span>总额：20"+i+"元</span>";
content = content + "<span>15:30:20</span>";
content = content + "</a>";
content = content + "</li>";
}
$("#thelist").prepend(content).listview('refresh');
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000);
}
function pullUpAction () {
setTimeout(function () {
var content = "";
for (var i=0;i<3;i++){
content = content + "<li>";
content = content + "<a data-ajax='false' href='order_detail.html'>";
content = content + "<span>桌号：20</span>";
content = content + "<span>总额：20"+i+"元</span>";
content = content + "<span>15:30:20</span>";
content = content + "</a>";
content = content + "</li>";
}
$("#thelist").append(content);
myScroll.refresh();
}, 1000);
}
function loaded() {
//清除所占的内存空间
if(myScroll!=null){
myScroll.destroy();
}
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true, //默认为true
//useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
document.getElementById('wrapper').style.left = '0';
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<link rel="stylesheet" type="text/css" href="css/iscroll.css">
</head>
<body>
<div class="orders_waitting">
<h2>
待处理订单
</h2>
<div class="list_container">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="thelist">
<li>
<a data-ajax="false" href="order_detail.html">
<span>桌号：20000000000000</span>
<span>总额：200元</span>
<span>15:30:20</span>
</a>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">向上滑动加载更多</span>
</div>
</div>
</div>
</div>
</div>
<div class="orders_doing">
<h2>
正在处理订单
</h2>
<div class="list_container">
<div id="wrapper1">
<div id="scroller1">
<div id="pullDown1">
<span class="pullDownIcon1"></span><span class="pullDownLabel1">Pull down to refresh...</span>
</div>
<ul id="thelist1">
<li>
<a data-ajax="false" href="pay.html">
<span>桌号：20</span>
<span>总额：200元</span>
<span>15:30:20</span>
</a>
</li>
</ul>
<div id="pullUp1">
<span class="pullUpIcon1"></span><span class="pullUpLabel1">向上滑动加载更多</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
hym136 2016-06-21
- 打赏
- 举报
怎么显示没有更多数据啊，有没有大神教教我，代码贴一下
十年树木_2015 2016-05-12
- 打赏
- 举报
是不是append的时候，选择器选择到了A区的元素啊？
十年树木_2015 2016-05-12
- 打赏
- 举报
打断点跟踪调试呀。顺便问下楼主你这个上拉加载是用的什么插件？能在IE浏览器上使用吗？
HelloBitches 2015-04-23
- 打赏
- 举报
上面的代码已经实现了A区域的滑动加载更多内容的功能，B区域的解决方法，我原来是把上面的代码原样复制一份，涉及到的容器ID类名什么的全都改成B区域内的（这种方法确实很锉。。。）但是内容出现混乱，A区域有滑动事件时B区却出现了内容更新
我JS刚入门水平，这问题不知怎么解决，公司项目进度很紧，求助。。。
HelloBitches 2015-04-23
- 打赏
- 举报
