效果圖
![IMG_3329.PNG]()
代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>模擬gridView</title>
<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.aui-bar{
background: #45C01A;
}
.flex-container {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
background: white;
}
.flex-item {
width:45%;
height:50px;
line-height: 50px;
box-sizing:border-box;
border:1px solid gray;
font-size: 13px;
text-align: center;
vertical-align: middle;
margin-top: 15px;
margin-left: 15px;
}
</style>
</head>
<body >
<header class="aui-bar aui-bar-nav" id="header">
<a class="aui-pull-left aui-btn" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">GridView</div>
</header>
<section class="flex-container" id="CellList"></section>
</body>
<script id="template" type="text/x-dot-template">
{{~it:value:index}}
<div class="flex-item" >{{=value.id}}</div>
{{~}}
</script>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/doT.min.js"></script>
<script>
var index = 0;
var _data;
apiready = function() {
$api.fixStatusBar($api.byId('header'));
initRefresh();
api.refreshHeaderLoading();
initEventListenter();
};
function closeWin(){
api.closeWin({
});
}
function initRefresh() {
api.setRefreshHeaderInfo({
loadingImg: 'widget://image/arrow_down.png',
bgColor: '#ccc',
textColor: '#fff',
textDown: '下拉刷新...',
textUp: '鬆開刷新...',
showTime: true
}, function(ret, err) {
requestData();
});
}
function requestData(isLoadMore) {
// $api.byId('noData').style.display = "none";
if (isLoadMore) {
index ++;
} else {
index = 0;
}
api.ajax({
url: 'https://www.fastmock.site/mock/1010b262a743f0b06c565c7a31ee9739/root/getPageArrDic',
method: 'post',
data: {
values: {
// noData: "true",
page: index
}
}
}, function(ret, err) {
setTimeout(api.refreshHeaderLoadDone(), '500');
// console.log(JSON.stringify(ret));
// console.log(JSON.stringify(ret["data"]));
if (ret) {
var tempFn = doT.template($api.text($api.byId('template')));
_data = ret["data"];
console.log(_data.length);
if (isLoadMore) {
if (_data.length > 0){
$api.append($api.byId('CellList'), tempFn(_data));
}else {
api.toast({msg: '已無更多數據', });
}
}else {
if (_data.length > 0){
$api.html($api.byId('CellList'), tempFn(_data));
}else {
api.toast({msg: '暫無數據', });
$api.byId('noData').style.display = "block";
$api.byId('noData').innerHTML = "暫無數據";
}
}
api.parseTapmode();
} else {
api.alert({ msg: JSON.stringify(err) });
}
});
}
function initEventListenter() {
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 300
}
}, function(ret, err) {
if (_data.length > 0){
requestData(true);
}
});
api.addEventListener({
name:'viewdisappear'
},function(ret,err){
alert("viewdisappear");
});
}
</script>
</html>
