實作上拉刷新，下拉取得資料功能實例代碼

　　以下程式碼完全可以用於實際專案中開發，實作上拉刷新，下拉取得資料功能：

/*上滑載入開始*/
/**
* @author wbr
* 滑動分頁服務
* 依賴iScroll.js(v4.2.5)
* @param create方法:
*   id:配合頁面div的id
* pullUpFn:上拉動畫結束後執行的載入更多回呼函數,通常應該是remote和資料處理
* pullDownFn:下拉動畫結束後執行的回呼函數,通常應該是remote和資料處理
* destroy方法:
*   scroller:create方法所傳回的iScroll物件
*  disable方法:停止上拉分頁
*  enable方法:重啟上拉分頁
**/
(function(window, undefined) {
'use strict';

var service = {};
service.$scrollPage = [
function() {
return {
create : function(id, pullUpFn, pullDownFn) {
var myScroll,
pullUpEl,
pullDownEl,
firstScroll = true;

pullUpEl = document.getElementById( 'pullUp');

pullDownEl = document.getElementById('pullDown');

function pullUpAction() {
pullUpFn(function(isEnd) {
//TODO 此處根據後台分頁是否結束標誌來修改
if (isEnd) {
//註解此行程式碼：當使用者第一次選擇的資訊無法載入時選擇另一個資訊可正常使用，新增上該行程式碼則銷毀載入功能，無法正常載入資料
// pullUpEl.className = 'nomore';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '沒有更多資料了';
}
});
}

function pullDownAction() {
if (pullDownFn) {
pullDownFn();
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '';
}
}

#

myScroll = new iScroll(id, {
topOffset : 40,
useTransition : true,
onRefresh : function() {
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉載入更多...';
}
if (pullDownEl.className. match("loading")) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
},
onScrollMove : function() {
if (firstScroll) {
this.refresh();
firstScroll = false;
}
if (this.y pullUpEl.className = 'peak';
pullUpEl.querySelector(' . pullUpLabel').innerHTML = '鬆手刷新...';
} else if (this.y > (this.maxScrollY - 50) && this.y pullUpEl.className = 'goon';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '繼續上拉...';
} else if (this.y >= 0) {
pullDownEl.className = "foot";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆手刷新. ..';
} else if (this.y = (this.maxScrollY + 100) && !pullDownEl.className.match("goon")) {
pullDownEl.className = "goon";
pullDownEl.querySelector('.pullDownLabel ' ).innerHTML = '繼續下拉...';
}
},
onScrollEnd : function() {
if (pullDownEl.className.match("foot")) {
pullDownEl.className = "正在載入";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '載入...';
pullDownAction();
} else if (pullDownEl.className. match("goon")) {
pullDownEl.className = "";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
if ( pullUpEl.className.match('peak')) {
pullUpEl.className = '載入中';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '載入中...';
pullUpAction ();
} else if (pullUpEl.className.match('goon')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
}
}
});
return myScroll;
},
//停止上拉分頁
disable : function( ) {
var pullUpEl = document.getElementById('pullUp');
//TODO 此處需要重寫，對功能暫無影響
pullUpEl.className = 'nomore';
},
// 啟用上拉分頁
enable : function() {
var pullUpEl = document.getElementById('pullUp');
pullUpEl.className = '';
},
//輸入iScroll實例，頁面會失去滾動效果
destroy : function(scroller) {
scroller.destroy();
}
};
}];

vx.module('ibsapp.libraries').service(service);

})(window);

之後就是js直接使用這個服務了，啟動這個服務代碼:

$scope.scroll = $scrollPage.create("merchant-all", $scope.getMore, $scope.downRefresh);

merchant-all是頁面中識別div的id

$scope.getMore是上拉獲取資料的方法

$scope.downRefresh是下拉刷新的方法，只需要在裡面寫入具體想要在添加頁面的資料即可

以上是實作上拉刷新，下拉取得資料功能實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！