將isScroll.js封裝成服務，實現單頁應用中重覆利用（基於Angularjs框架）

　　以下代碼完全可以用於實際項目中開發，實現上拉刷新，下拉獲取數據功能：

/*上滑載入 開始*/
/**
* @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 <= (this.maxScrollY - 50) && !pullUpEl.className.match('peak') && !pullUpEl.className.match('nomore')) {
pullUpEl.className = 'peak';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆手刷新...';
} else if (this.y > (this.maxScrollY - 50) && this.y < (this.maxScrollY + 100) && !pullUpEl.className.match('goon') && !pullUpEl.className.match('nomore')) {
pullUpEl.className = 'goon';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '繼續上拉...';
} else if (this.y >= 0) {
pullDownEl.className = "foot";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆手刷新...';
} else if (this.y < 0 && 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 = "loading";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '載入中...';
pullDownAction();
} else if (pullDownEl.className.match("goon")) {
pullDownEl.className = "";
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
}
if (pullUpEl.className.match('peak')) {
pullUpEl.className = 'loading';
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是下拉刷新的方法，只需要在裡面寫入具體想要在頁面添加的數據即可