iscroll实现上拉加载更多,分页链接怎么设置

乔木の春 2015-07-25 10:48:11
网站列表的链接格式是:
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>
...全文
607 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
乔木の春 2015-07-27
  • 打赏
  • 举报
回复
引用 3 楼 showbo 的回复:
你的 <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加载前显示,加载完毕后隐藏起来
由于自己太菜,没有能解决问题,但还是谢谢帮助
乔木の春 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加载前显示,加载完毕后隐藏起来

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧