풀업을 구현하여 새로 고치고 풀다운을 구현하여 데이터 함수를 얻는 예제 코드

　다음 코드는 실제 프로젝트 개발에서 풀업 새로 고침 및 풀다운을 구현하여 데이터 기능을 얻을 수 있습니다.

/*슬라이드하여 로딩 시작*/
/**
* @author wbr
* 슬라이딩 페이징 서비스
* iScroll.js(v4.2.5)에 따라 다름
* @param create method:
* id: 페이지의 id와 일치 div
* pullUpFn: pull- up 애니메이션 종료 추가 콜백 함수, 일반적으로 원격 및 데이터 처리
* pullDownFn: 풀다운 애니메이션이 끝난 후 실행되는 콜백 함수, 일반적으로 원격 및 데이터 처리
* destroy 메소드:
* 스크롤러: create 메소드에 의해 반환된 iScroll 객체
* 비활성화 방법: 풀업 페이징 중지
* 활성화 방법: 풀업 페이징 다시 시작
**/
(function( 창, 정의되지 않음) {
'엄격한 사용';

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');

함수 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;
},
//停止上拉分页
비활성화 : function() {
var pullUpEl = document.getElementById('pullUp');
//TODO 此处需要중写，对功能暂无影响
pullUpEl.className = 'nomore';
},
//启용上拉分页
활성화 : 함수() {
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

　　　　$스코프. getMore는 더 많은 정보를 제공합니다.

위 내용은 풀업을 구현하여 새로 고치고 풀다운을 구현하여 데이터 함수를 얻는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!