apicloud js獲取資料列表 上拉載入更多 標準頁 (非vue版 )
阿新 • • 發佈：2019-02-03
<!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>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../css/skin.css"/>
<style>
html,body{background-color: #F6F7FB;min-height: 100%;}
#videolist li { display: flex;display: -webkit-flex; justify-content: center; width: 100%; padding:.5rem .5rem;}
#videolist li img.leftImg {display: block;width: 6rem;height: 4rem; margin-right: .4rem; border-radius: .3rem}
#videolist li .text{ flex:1;}
#videolist li .item1{line-height: 1rem; width: 100%;font-size: .8rem;}
#videolist li .item2{width: 100%;}
#videolist li .item2>div{font-size: .6rem;margin-right:.3rem; display: inline-block;background-color: #f2f2f2; border-radius: .8rem; padding-left: .3rem !important;padding-right: .3rem !important}
#videolist li .item3{display: flex;display: -webkit-flex;justify-content: space-between;width: 100%;font-size: .6rem;color:#666}
#videolist li .item3 .time{}
#videolist li .item3 .count img{width: .8rem; display: inline-block;vertical-align: middle;margin-bottom:.1rem }
.load-footer{line-height: 1.5rem;}
</style>
</head>
<body>
<section >
<ul id="videolist">
暫時沒有資料
<!--li class="aui-border-b">
<img src="http://9zonline.cn//player//2//2.jpg" class="leftImg"/>
<div class="text">
<div class="item1 aui-ellipsis-2">這是一個標題這是一個標題這是一個標題這是一個標題這是一個標題</div>
<div class="item2"><div>標籤1</div><div>標籤2</div></div>
<div class="item3">
<div class="time">2018-1-1</div>
<div class="count"><img src="../../image/icon/vedio/views.png" alt="" class="aui-margin-r-5">2345</div>
</div>
</div>
</li-->
</ul>
</section>
<footer class="load-footer aui-font-size-14 ">
<div class="span aui-hide" id="loadstatus0">
<div class="loadingBtn"></div>
</div>
<div class="morestatus aui-hide" id="loadstatus1">----- 載入失敗 -----</div>
<div class="morestatus aui-hide" id="loadstatus2">----- 網路異常 -----</div>
<div class="morestatus aui-hide" id="loadstatus3">----- 沒有新內容 -----</div>
</footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var page =0;
var imgDomain = APPconfig.ApiDomain.ajaxDomain;
apiready = function(){
api.parseTapmode();
//第一頁資料
initData();
//滾動到底部資料
scrolltobottomEvent();
};
//獲取第一頁資料
function initData(){
loadingFullScreen(true);
page = 0;
var saveName = +'_snsGameID'+api.pageParam.snsGameID+'_page'+page;
var saveFolder = APPconfig.cachefolder.channelVideoList;
var ajaxData = {page:page,snsGameID:api.pageParam.snsGameID};
//console.log("---AJAXdATA---"+JSON.stringify(ajaxData));
ajaxCacheData2(saveFolder,saveName,'/getshares/bygame',"post",ajaxData,'initData()',function(ret){
console.log("--/getshares/bycatalog--"+JSON.stringify(ret));
var html = getHtml(ret.data);
$api.html($api.byId("videolist"), html);
page = page+1;
});
}
//非第一頁 載入更多
function getDataByPage(){
var ajaxData = {page:page,snsGameID:api.pageParam.snsGameID};
ajaxRequest("/getshares/bygame", "post", ajaxData, function(ret,err){
if(ret){
if(ret.code == 200){
if(ret.code.length>0){
var html = getHtml(ret.data);
$api.append($api.byId("videolist"), html);
page = page+1;
}else{
showAllStatus(3);
//mytoast("沒有更多資料");
}
}else{
showAllStatus(1);
//mytoast("載入失敗");
}
}else{
showAllStatus(2);
//mytoast("網路異常");
}
});
}
function scrolltobottomEvent() {
//滾動更多
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 100 //設定距離底部多少距離時觸發，預設值為0，數字型別
}
}, function(ret, err) {
showAllStatus(0);
getDataByPage();
//alert('已滾動到底部');
});
}
function getHtml(data){
var html = '';
for(var i=0;i<data.length;i++){
var tagHtml = '';
if(data[i].topic.snsTags.length>0){
for(var b=0;b<data[i].topic.snsTags.length;b++){
tagHtml += '<div>'+data[i].topic.snsTags[b].snsTagName+'</div>';
}
}
//console.log("tag：：：：" + tagHtml);
var oneHtml =
'<li class="aui-border-b" onclick="showOneVideo('+data[i].snsShareID+','+data[i].snsTopicID+','+ data[i].snsUserID+')">'
+' <img src="'+data[i].snsShareImageUrl+'" class="leftImg"/>'
+' <div class="text">'
+' <div class="item1 aui-ellipsis-2">'+(data[i].snsShareDesc == null ? '' : data[i].snsShareDesc)+'</div>'
+' <div class="item2">'+tagHtml+'</div>'
+' <div class="item3">'
+' <div class="time">'+dateFtt("yyyy-MM-dd hh:mm:ss",data[i].topic.snsAddTime)+'</div>'
+' <div class="count"><img src="../../image/icon/vedio/views.png" alt="" class="aui-margin-r-5">'+data[i].topic.snsViews+'</div>'
+' </div>'
+' </div>'
+'</li>';
html += oneHtml;
}
//console.log("html：：：" + html);
return html;
}
//隱藏所有上拉提示
function showAllStatus(loadstatus){
var loadstatus0 = $api.byId('loadstatus0');
var loadstatus1 = $api.byId('loadstatus1');
var loadstatus2 = $api.byId('loadstatus2');
var loadstatus3 = $api.byId('loadstatus3');
var loadstatus4 = $api.byId('loadstatus4');
$api.addCls(loadstatus0, 'aui-hide');
$api.addCls(loadstatus1, 'aui-hide');
$api.addCls(loadstatus2, 'aui-hide');
$api.addCls(loadstatus3, 'aui-hide');
$api.addCls(loadstatus4, 'aui-hide');
var currentIdName = 'loadstatus'+loadstatus;
var showDom = $api.byId(currentIdName);
$api.removeCls(showDom, 'aui-hide');
}
</script>
</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>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../css/skin.css"/>
<style>
html,body{background-color: #F6F7FB;min-height: 100%;}
#videolist li { display: flex;display: -webkit-flex; justify-content: center; width: 100%; padding:.5rem .5rem;}
#videolist li img.leftImg {display: block;width: 6rem;height: 4rem; margin-right: .4rem; border-radius: .3rem}
#videolist li .text{ flex:1;}
#videolist li .item1{line-height: 1rem; width: 100%;font-size: .8rem;}
#videolist li .item2{width: 100%;}
#videolist li .item2>div{font-size: .6rem;margin-right:.3rem; display: inline-block;background-color: #f2f2f2; border-radius: .8rem; padding-left: .3rem !important;padding-right: .3rem !important}
#videolist li .item3{display: flex;display: -webkit-flex;justify-content: space-between;width: 100%;font-size: .6rem;color:#666}
#videolist li .item3 .time{}
#videolist li .item3 .count img{width: .8rem; display: inline-block;vertical-align: middle;margin-bottom:.1rem }
.load-footer{line-height: 1.5rem;}
</style>
</head>
<body>
<section >
<ul id="videolist">
暫時沒有資料
<!--li class="aui-border-b">
<img src="http://9zonline.cn//player//2//2.jpg" class="leftImg"/>
<div class="text">
<div class="item1 aui-ellipsis-2">這是一個標題這是一個標題這是一個標題這是一個標題這是一個標題</div>
<div class="item2"><div>標籤1</div><div>標籤2</div></div>
<div class="item3">
<div class="time">2018-1-1</div>
<div class="count"><img src="../../image/icon/vedio/views.png" alt="" class="aui-margin-r-5">2345</div>
</div>
</div>
</li-->
</ul>
</section>
<footer class="load-footer aui-font-size-14 ">
<div class="span aui-hide" id="loadstatus0">
<div class="loadingBtn"></div>
</div>
<div class="morestatus aui-hide" id="loadstatus1">----- 載入失敗 -----</div>
<div class="morestatus aui-hide" id="loadstatus2">----- 網路異常 -----</div>
<div class="morestatus aui-hide" id="loadstatus3">----- 沒有新內容 -----</div>
</footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var page =0;
var imgDomain = APPconfig.ApiDomain.ajaxDomain;
apiready = function(){
api.parseTapmode();
//第一頁資料
initData();
//滾動到底部資料
scrolltobottomEvent();
};
//獲取第一頁資料
function initData(){
loadingFullScreen(true);
page = 0;
var saveName = +'_snsGameID'+api.pageParam.snsGameID+'_page'+page;
var saveFolder = APPconfig.cachefolder.channelVideoList;
var ajaxData = {page:page,snsGameID:api.pageParam.snsGameID};
//console.log("---AJAXdATA---"+JSON.stringify(ajaxData));
ajaxCacheData2(saveFolder,saveName,'/getshares/bygame',"post",ajaxData,'initData()',function(ret){
console.log("--/getshares/bycatalog--"+JSON.stringify(ret));
var html = getHtml(ret.data);
$api.html($api.byId("videolist"), html);
page = page+1;
});
}
//非第一頁 載入更多
function getDataByPage(){
var ajaxData = {page:page,snsGameID:api.pageParam.snsGameID};
ajaxRequest("/getshares/bygame", "post", ajaxData, function(ret,err){
if(ret){
if(ret.code == 200){
if(ret.code.length>0){
var html = getHtml(ret.data);
$api.append($api.byId("videolist"), html);
page = page+1;
}else{
showAllStatus(3);
//mytoast("沒有更多資料");
}
}else{
showAllStatus(1);
//mytoast("載入失敗");
}
}else{
showAllStatus(2);
//mytoast("網路異常");
}
});
}
function scrolltobottomEvent() {
//滾動更多
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 100 //設定距離底部多少距離時觸發，預設值為0，數字型別
}
}, function(ret, err) {
showAllStatus(0);
getDataByPage();
//alert('已滾動到底部');
});
}
function getHtml(data){
var html = '';
for(var i=0;i<data.length;i++){
var tagHtml = '';
if(data[i].topic.snsTags.length>0){
for(var b=0;b<data[i].topic.snsTags.length;b++){
tagHtml += '<div>'+data[i].topic.snsTags[b].snsTagName+'</div>';
}
}
//console.log("tag：：：：" + tagHtml);
var oneHtml =
'<li class="aui-border-b" onclick="showOneVideo('+data[i].snsShareID+','+data[i].snsTopicID+','+ data[i].snsUserID+')">'
+' <img src="'+data[i].snsShareImageUrl+'" class="leftImg"/>'
+' <div class="text">'
+' <div class="item1 aui-ellipsis-2">'+(data[i].snsShareDesc == null ? '' : data[i].snsShareDesc)+'</div>'
+' <div class="item2">'+tagHtml+'</div>'
+' <div class="item3">'
+' <div class="time">'+dateFtt("yyyy-MM-dd hh:mm:ss",data[i].topic.snsAddTime)+'</div>'
+' <div class="count"><img src="../../image/icon/vedio/views.png" alt="" class="aui-margin-r-5">'+data[i].topic.snsViews+'</div>'
+' </div>'
+' </div>'
+'</li>';
html += oneHtml;
}
//console.log("html：：：" + html);
return html;
}
//隱藏所有上拉提示
function showAllStatus(loadstatus){
var loadstatus0 = $api.byId('loadstatus0');
var loadstatus1 = $api.byId('loadstatus1');
var loadstatus2 = $api.byId('loadstatus2');
var loadstatus3 = $api.byId('loadstatus3');
var loadstatus4 = $api.byId('loadstatus4');
$api.addCls(loadstatus0, 'aui-hide');
$api.addCls(loadstatus1, 'aui-hide');
$api.addCls(loadstatus2, 'aui-hide');
$api.addCls(loadstatus3, 'aui-hide');
$api.addCls(loadstatus4, 'aui-hide');
var currentIdName = 'loadstatus'+loadstatus;
var showDom = $api.byId(currentIdName);
$api.removeCls(showDom, 'aui-hide');
}
</script>
</html>