将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是下拉刷新的方法，只需要在里面写入具体想要在页面添加的数据即可

　　　　

 

　　　　

转载于:https://www.cnblogs.com/lcyjs/p/7088632.html