Beispielcode zur Implementierung von Pull-up-Funktionen zum Aktualisieren und Pull-down-Funktionen zum Abrufen von Daten

Der folgende Code kann in der tatsächlichen Projektentwicklung verwendet werden, um Pull-Up zum Aktualisieren und Pull-Down zum Abrufen von Datenfunktionen zu implementieren:

/*Nach oben schieben, um mit dem Laden zu beginnen*/
/**
* @author wbr
* Sliding-Paging-Dienst
* Abhängig von iScroll.js(v4.2.5)
* @param create method:
* id: die ID des Seiten-Div
* pullUpFn: Die Callback-Funktion „Mehr laden“, die nach dem Ende der Pull-Up-Animation ausgeführt wird, sollte normalerweise remote und datenverarbeitend sein
* pullDownFn: Die Callback-Funktion, die nach dem Ende der Pull-Down-Animation ausgeführt wird, sollte normalerweise remote und datenverarbeitend sein Verarbeitung
* Methode zerstören:
* Vom Scroller zurückgegebenes iScroll-Objekt: Methode erstellen
* Methode deaktivieren: Pull-up-Paging stoppen
* Methode aktivieren: Pull-up-Paging neu starten
**/
(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 this Ändern
je nachdem, ob das Hintergrund-Paging endet oder nicht if (isEnd) {
//Diese Codezeile entfernen: Wenn die vom Benutzer zum ersten Mal ausgewählten Informationen nicht geladen werden können, Es kann normal verwendet werden, indem andere Informationen ausgewählt werden. Durch das Hinzufügen dieser Codezeile wird die Ladefunktion zerstört und die Daten können nicht normal geladen werden.
// pullUpEl.className = 'nomore';
pullUpEl.querySelector('.pullUpLabel'). innerHTML = 'Keine Daten mehr';
}
});
}

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;
},
//停止上拉分页
deaktivieren : 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);

服务代码:

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

　　　　merchant-all是识别页面中div的id

　　　　$scope.getMore是上拉获取数据方法

　　　　$scope.downRefresh是下拉刷新的方方法，只需要在里面写入具体想要在页面添加的数据即可

Das obige ist der detaillierte Inhalt vonBeispielcode zur Implementierung von Pull-up-Funktionen zum Aktualisieren und Pull-down-Funktionen zum Abrufen von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!