87,955
社区成员
发帖
与我相关
我的任务
分享iscroll实现上拉加载更多，分页链接怎么设置
网站列表的链接格式是：
http://m.xxxx.com/qyd/list_12_1.html
http://m.xxxx.com/qyd/list_12_2.html
请问代码中第42行的参数怎么去设置，本人实在菜鸟，代码是从网络上下载的
http://m.xxxx.com/qyd/list_12_1.html
http://m.xxxx.com/qyd/list_12_2.html
请问代码中第42行的参数怎么去设置，本人实在菜鸟，代码是从网络上下载的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iscroll下拉或上滑加载更多内容分页效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href = "css/iscroll.css">
<script type="text/javascript">
var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon"),
distance = 30; //滑动距离
myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
myScroll.on("scroll",function(){
var y = this.y,
maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon");
if(y >= distance){
!downHasClass && downIcon.addClass("reverse_icon");
return "";
}else if(y < distance && y > 0){
downHasClass && downIcon.removeClass("reverse_icon");
return "";
}
if(maxY >= distance){
!upHasClass && upIcon.addClass("reverse_icon");
return "";
}else if(maxY < distance && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon");
return "";
}
});
function upAjax(){
var params = '{"params":{"shopType":"0","sort":"0","cityId":"1","pageRows":"10","deviceType":"MX4","toPage":"1","userX":"118.790609","userY":"32.047616","filter":"0"}}';
$.ajax({
type: "post",
url: "url",
data: params,
crossDomain: true,
xhrFields: {
withCredentials: true
},
dataType: "json",
contentType: "application/json; charset=utf-8"
}).done(function(d) {
if (d && d.response.shopList.length > 0) {
console.log(d.response.shopList);
var content = "";
for(var i=0,len=d.response.shopList.length;i<len;i++){
content += "<li>"+ d.response.shopList[i].shopName +"</li>"
}
$('#scroller-content ul').append(content);
myScroll.refresh(d.response.page.pageAmount);
}
}).fail(function() {
document.getElementById('list').innerHTML = "<font style='font-size:0.16rem;'>数据请求失败，请重新刷新</font>";
})
}
function downAjax(){
window.location.reload();
}
// 下拉刷新事件
myScroll.on("slideDown",function(){
if(this.y > distance){
downAjax();
upIcon.removeClass("reverse_icon")
}
});
// 上拉滑动事件
myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > distance){
upAjax();
upIcon.removeClass("reverse_icon")
}
});
</script>
</head>
<body>
<!--代码部分begin-->
<div id="wrapper">
<div id="scroller">
<div id="scroller-pullDown">
<span id="down-icon" class="icon-double-angle-down pull-down-icon"></span>
<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
</div>
<div id="scroller-content">
<ul id="list">
<li>默认数据1</li>
<li>默认数据2</li>
<li>默认数据3</li>
<li>默认数据4</li>
<li>默认数据5</li>
<li>默认数据6</li>
<li>默认数据7</li>
<li>默认数据8</li>
<li>默认数据9</li>
<li>默认数据10</li>
<li>默认数据11</li>
<li>默认数据12</li>
<li>默认数据13</li>
<li>默认数据14</li>
<li>默认数据15</li>
<li>默认数据16</li>
<li>默认数据17</li>
<li>默认数据18</li>
<li>默认数据19</li>
<li>默认数据20</li>
<li>默认数据21</li>
<li>默认数据22</li>
<li>默认数据23</li>
<li>默认数据24</li>
<li>默认数据25</li>
<li>默认数据26</li>
<li>默认数据27</li>
<li>默认数据28</li>
<li>默认数据29</li>
<li>默认数据30</li>
</ul>
</div>
<div id="scroller-pullUp">
<span id="up-icon" class="icon-double-angle-up pull-up-icon"></span>
<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
</div>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/iscroll.js"></script>
<!--代码部分end-->
</body>
</html>
...全文
请发表友善的回复…
发表回复
乔木の春 2015-07-27
- 打赏
- 举报
由于自己太菜，没有能解决问题，但还是谢谢帮助
乔木の春 2015-07-25
- 打赏
- 举报
像图中圈起来的功能
二楼发错图了，不好意思
二楼发错图了，不好意思
乔木の春 2015-07-25
- 打赏
- 举报
像这样的功能
Go 旅城通票 2015-07-25
- 打赏
- 举报
你的
<script type="text/javascript">
var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon"),
distance = 30; //滑动距离
这个代码块放到下面xxx标记的地方，要不你的 upIcon = $("#up-icon"), downIcon = $("#down-icon"),这个2个代码要报错了，jquery都没导入
<script src="/js/jquery.min.js"></script>
<script src="/js/iscroll.js"></script>
xxxxx
你自己搞个容器显示提示内容就好了，ajax加载前显示，加载完毕后隐藏起来
