Solution au problème selon lequel isscroll.js ne peut pas rebondir lors de l'extraction de haut en bas vers les compétencesfresh_javascript

Les amis qui ont utilisé l'effet d'actualisation pull-up et pull-down d'iscroll.js auraient dû rencontrer ce problème : dans le navigateur iOS, lorsque vous tirez vers le haut ou vers le bas pour actualiser, lorsque le doigt est glissé hors de l'écran. , la page ne peut pas rebondir. Parce que beaucoup de gens ne peuvent pas résoudre ce problème, ils ne le résolvent tout simplement pas. Certaines personnes n'utilisent tout simplement pas HTML et utilisent des pages natives au lieu de HTML.

Je crois que de nombreux amis ont aussi leurs propres solutions, mais elles n'ont pas été écrites, donc les solutions ne peuvent pas être trouvées en ligne. Dans de nombreux groupes QQ, de nombreuses personnes demandent comment résoudre ce problème, j'ai donc écrit cet article pour enregistrer ma solution, en espérant qu'elle sera utile à certains amis.

Le code principal pour l'actualisation pull-up et pull-down :

 myScroll = new iScroll('wrapper', {
  vScrollbar: false,
  useTransition: true,
  topOffset: pullDownOffset,
  onRefresh: function () {
   if (pullDownEl.className.match('loading')) {
    pullDownEl.className = '';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
   } else if (pullUpEl.className.match('loading')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
   }
  },
  onScrollMove: function () {
   if (this.y > 5 && !pullDownEl.className.match('flip')) {
    pullDownEl.className = 'flip';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
    this.minScrollY = 0;
   } else if (this.y < 5 && pullDownEl.className.match('flip')) {
    pullDownEl.className = '';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
    this.minScrollY = -pullDownOffset;
   } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
    pullUpEl.className = 'flip';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
    this.maxScrollY = this.maxScrollY;
   } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
    this.maxScrollY = pullUpOffset;
   }
  },
  onScrollEnd: function () {
   if (pullDownEl.className.match('flip')) {
    pullDownEl.className = 'loading';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
    pullDownAction();
   } else if (pullUpEl.className.match('flip')) {
    pullUpEl.className = 'loading';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
    pullUpAction();
   }
  }
 });

La raison pour laquelle la page ne peut pas rebondir est que l'événement touchend ne peut pas être déclenché une fois le doigt retiré de l'écran et que l'animation de rebond ne peut pas être exécutée. La solution est de déclencher manuellement la méthode d'animation lorsque le doigt est proche du bord de l'écran.

Insérez le code de jugement dans la méthode onScrollMove :

  onScrollMove: function () {
   if((this.y < this.maxScrollY) && (this.pointY < 1)){
    this.scrollTo(0, this.maxScrollY, 400);
    return;
   } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
    this.scrollTo(0, 0, 400);
    return;
   }

   ......
  }

Ce qui suit explique la signification de ce code.

this.y est la distance verticale à laquelle la page a défilé, this.maxScrollY est la distance de défilement vertical maximale et this.pointY est la coordonnée verticale actuelle du doigt.

Lorsque this.y < this.maxScrollY, il est déjà dans le processus de pull-up. Lorsque (this.y < this.maxScrollY) && (this.pointY < 1), il est dans le processus de pull-up. processus et le doigt a touché le bord de l'écran, déclenchez manuellement this.scrollTo(0, this.maxScrollY, 400) à ce moment-là, et la page commencera à rebondir.

Le processus déroulant peut également être analysé de la même manière.