使用APICloud編寫優雅的HTML5程式碼《一》:下拉重新整理、上拉載入更多
阿新 • • 發佈:2019-02-14
摘要: 發現APICloud倡導符合CMD以及AMD規範的JS編碼標準,提供基於HTML5的跨平臺App編譯,並開放大量的端API和雲API,輔助App開發及運營,雲端並重,方向很是新穎。特此分享相關研究成果,持續更新中。
一、實現下拉重新整理:
預設樣式->程式碼清晰簡潔明瞭,符合ECMA262規範的callback,最少只需5行程式碼:
apiready = function (){
api.setRefreshHeaderInfo(function(ret, err){
//refresh event callback
toDoRequest();
});
}
//do ajax
function toDoRequest(){
// GET、POST、PUT、DELETE、…
api.ajax({
url:'http://xxx.xxx.xxx'
}, function(ret, err){
api.refreshHeaderLoadDone(); //復位下拉重新整理
//do your business
});
}
自定義樣式->引數靈活可自由定義,非必選,實現自定義下拉重新整理頭的資訊:
apiready = function(){
var param = {};
param.loadingImgae = 'widget://image/refresh.png'; //定義重新整理小箭頭的圖片
param.bgColor = '#ccc'; //定義下拉重新整理區域的背景
param.textColor = '#fff'; //定義下拉重新整理提示文字的顏色
param.textDown = '下拉試試...'; //定義下拉重新整理文字
param.textUp = '鬆開試試...'; //定義鬆開重新整理文字
param.showTime = true; //定義是否顯示最後一次重新整理時間
api.setRefreshHeaderInfo(param, function(ret, err){
toDoRequest();
});
}
function toDoRequest(){
api.ajax({
url:'http://xxx.xxx.xxx'
}, function(ret, err){
api.refreshHeaderLoadDone(); //復位下拉重新整理
//do your business
});
}
二、實現載入更多:
通過監聽頁面滾動到底部事件來實現:
apiready = function(){
api. addEventListener({name:'scrolltobottom'}, function(ret, err){
//refresh event callback
toDoRequest();
});
}
//do ajax
function toDoRequest(){
// GET、POST、PUT、DELETE、…
api.ajax({
url:'http://xxx.xxx.xxx'
}, function(ret, err){
//do your business
});
}
從介面規範上看,APICloud開放的端API簡潔明瞭,效率高,規範、語義明確。極大提高了開發人員的工作效率,以及程式碼的可讀性、維護性、擴充套件性。