【分享】APICloud 上滑加载更多实例源码

灵雨飘零

APICloud 上滑加载更多实例源码，希望对大家有帮助！！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
/>
<title>
列表
</title>
<script src="../../script/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" src="../../script/api.js">
</script>
</head>
<body>
<div style="width:100%">
<ul id="list_item">
</ul>
</div>
</body>
<script>
apiready = function() {
var id = 0;
var cellarray = new Array();
//得到json的路径
var href = window.location.href; // 得到当前文件的路径
var Route = ""; //得到json的路径
var json = ""; //读取的json
var arr = new Array();
arr = href.split("/");
for (var i = 0; i < arr.length - 1; i++) {
Route += arr[i] + '/';
}
Route += "list.json";
//读取json的文件
api.readFile({
path: Route
},
function(ret, err) {
if (ret.status) {
json = ret.data;
//Json(json);
var list = eval('(' + json + ')');
var json1 = eval(list.data);
for (var i = 0; i < json1.length; i++) {
cellarray[i] = json1[i].img;
}
//当json的值大于10的时候
if (cellarray.length >= 10) {
//循环添加前10 个li标签
id= Ergodic(id ,id * 10 + 10,cellarray);
} else {
//小于10则直接添加
id= Ergodic(id ,cellarray.length,cellarray);
}
} else {
api.alert({
msg: '错误码: ' + err.code + '错误信息' + err.msg
});
}
});
//判断是否滑到底
api.addEventListener({
name: 'scrolltobottom'
},
function(ret, err) {
if (cellarray.length - id * 10 >= 10) {
//循环添加前10 个li标签
id= Ergodic(id , id * 10 + 10,cellarray);
} else {
if (cellarray.length - id * 10 < 10 && cellarray.length - id * 10 > 0) {
//小于10则直接添加
id= Ergodic(id , cellarray.length,cellarray);
} else {
api.toast({
msg: '已加载完毕',
duration: 1000,
location: 'bottom'
});
}
}
})
}
function tuandetail()
{
api.openWin({
name : 'tuandetail_header',
url : '../tuandetail_header.html',
bounces : false,
delay : 200
});
}
//遍历cellarray返回id
function Ergodic(id ,sty,cellarray)
{
var html = "";
for (var i = id * 10; i < sty; i++) {
html += "<li onclick='tuandetail()'>><img src='" + cellarray[i] + "'/></li>\r\n";
}
$("#list_item").append(html);
id += 1;
return id;
}
</script>
</html>

复制代码

疯子宇

赞赞赞赞

突围

谢谢分享

tangfeisos

绝对支持啊，你写的对我这种小白都超级有用！大神我想知道左右滑动到下一个实例怎么写的？求教！

灵雨飘零

tangfeisos 发表于 2015-6-21 18:40
绝对支持啊，你写的对我这种小白都超级有用！大神我想知道左右滑动到下一个实例怎么写的？求教！ ...

可以看API和官方实例。

Reduco

灵雨飘零发表于 2015-6-23 08:06
可以看API和官方实例。

这个官方没有吧

技术咨询-特特

感谢分享

技术咨询-特特

赞赞赞