Example code to implement pull-up to refresh and pull-down to obtain data functions

　The following code can be used in actual project development to implement pull-up refresh and pull-down to obtain data functions:

/*Slide up to start loading*/
/**
* @author wbr
* Sliding paging service
* Depends on iScroll.js (v4.2.5)
* @param create method:
* id: Match the id of the page div
* pullUpFn: Loading executed after the pull-up animation ends More callback functions, usually remote and data processing
* pullDownFn: The callback function executed after the pull-down animation ends, usually remote and data processing
* destroy method:
* scroller: iScroll object returned by the create method
* disable method: stop pull-up paging
* enable method: restart pull-up paging
**/
(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 is modified here according to whether the background paging ends or not
if (isEnd) {
//Remove this line of code: When the information selected by the user for the first time cannot be loaded, it can be used normally by selecting another information. Add this line of code Then the loading function is destroyed and data cannot be loaded normally
// pullUpEl.className = 'nomore';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'No more data';
}
});
}

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

The above is the detailed content of Example code to implement pull-up to refresh and pull-down to obtain data functions. For more information, please follow other related articles on the PHP Chinese website!