Exemple de code pour implémenter le pull-up pour actualiser et le pull-down pour obtenir les fonctions de données

Le code suivant peut être utilisé dans le développement réel d'un projet pour implémenter le pull-up pour actualiser et le pull-down pour obtenir les fonctions de données :

/*Faites glisser vers le haut pour commencer le chargement*/
/**
* @author wbr
* Service de pagination coulissante
* Dépend d'iScroll.js(v4.2.5)
* Méthode de création @param :
* id : l'identifiant de la page div
* pullUpFn : La fonction de rappel de chargement supplémentaire exécutée après la fin de l'animation déroulante doit généralement être distante et le traitement des données
* pullDownFn : La fonction de rappel exécutée après la fin de l'animation déroulante doit généralement être distante et le traitement des données traitement
* méthode de destruction :
* objet iScroll renvoyé par scroller : méthode de création
* méthode de désactivation : arrêter la pagination pull-up
* méthode d'activation : redémarrer la pagination pull-up
**/
(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) {
//À FAIRE modifier
selon que la pagination en arrière-plan se termine ou non if (isEnd) {
//Supprimer cette ligne de code : Lorsque les informations sélectionnées par l'utilisateur pour la première fois ne peuvent pas être chargées, il peut être utilisé normalement en sélectionnant une autre information. L'ajout de cette ligne de code détruit la fonction de chargement et ne peut pas charger les données normalement
// pullUpEl.className = 'nomore';
pullUpEl.querySelector('.pullUpLabel'). innerHTML = 'Plus de données';
}
});
}

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;
},
//停止上拉分页
désactiver : function() {
var pullUpEl = document.getElementById('pullUp');
//TODO 此处需要重写，对功能暂无影响
pullUpEl.className = 'nomore';
},
//启用上拉分页
activer : 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是下拉刷新的方法，只需要在里面写入具体想要在页面添加的数据即可

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!