非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>APICloud APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
html,
body {
height: 100%;
width: 100%;
background-color: #fff;
}
</style>
</head>
<body>
<div id="frame1_carlist"> </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var skip = 1; //页码
var limit = 10; //每页条数
var datas = new Array(); //页面数据存储的数组
//初始化
apiready = function() {
fnInitData();
fnInitEvent();
};
function fnInitData() {
//请求参数
var ajaxValues = {
where: {},
skip: skip,
limit: limit,
order: "createdAt DESC"
};
// 加载loading
api.showProgress({
title: "获取数据中...",
text: ‘请稍等...‘
});
//api.ajax
api.ajax({
url: ‘http://xxxx.xxxx.cn/index/carlease/carslist‘,
headers: {
"X-APICloud-AppId": "A6078991134970",
"X-APICloud-AppKey": "bb3d0326284e1306de46d29c928e9fa8632d156c.1523672167637"
},
data: {
values: {
page: JSON.stringify(skip)
}
},
dataType: "json",
method: "post",
}, function(ret, err) {
console.log(JSON.stringify(skip));
//取消loading
api.hideProgress();
if (ret) {
var newa = ret.data.carlist;
console.log(JSON.stringify(newa));
//把请求到的数据遍历添加进页面数据的数组
if (newa.length > 0) {
for (var i = 0, len = newa.length; i < len; i++) {
datas.push(newa[i]);
};
//调用页面渲染的方法
fnInitView(datas);
} else {
api.toast({
msg: ‘没数据了,别拽了‘
});
skip -= 1;
};
console.log("第" + (skip + 1).toString() + "页");
} else {
alert("交互失败");
};
});
};
/**
* 渲染页面布局
*
* @param {Array} data
*/
function fnInitView(data) {
// 取消下拉刷新效果
api.refreshHeaderLoadDone();
//声明容器 并置空
var frame1_carlist_html = ‘‘;
//遍历页面数据的数组进行创建标签,插入容器
for (var i = 0; i < data.length; i++) {
frame1_carlist_html += ‘插入代码'
};
$api.byId(‘frame1_carlist‘).innerHTML = frame1_carlist_html;
};
/**
* 初始化页面监听事件
*/
function fnInitEvent() {
/**上拉加载 */
api.addEventListener({
name: ‘scrolltobottom‘,
extra: {
threshold: 10
}
}, function(ret, err) {
//页码+1,继续请求数据
skip += 1;
fnInitData();
});
/** 下拉刷新 */
api.setRefreshHeaderInfo({
bgColor: ‘#ccc‘,
textColor: ‘#fff‘,
textDown: ‘下拉刷新...‘,
textUp: ‘松开刷新...‘
}, function(ret, err) {
//重置页码、页面数据,请求数据
skip = 1;
datas = new Array();
fnInitData();
});
};
function openwin_ware(a) {
api.openWin({
name: ‘ware‘,
url: ‘./ware.html‘,
pageParam: {
wareId: a
}
});
}
</script>
</html>
感谢您的阅读, 如有什么不妥之处,还请赐教,我会继续努力,分享更好的前端代码。 点赞和在看就是最大的支持❤️